Uchiha Itachi Landing Page.

Description

This is a cinematic landing page themed around Uchiha Itachi from Naruto. As you scroll, a sequence of image frames plays back like film footage, driving Itachi’s eyes open to reveal the Sharingan, accompanied by lightning, particle effects, and synthesized thunder audio.

Background

Built as a “One Day One Code” experiment in scroll-driven storytelling, this page treats the scroll position as a timeline. Rather than pulling in a heavy animation library, the frame playback, effects, and audio are all driven manually from raw scroll and pointer events, which made it a good study in hand-rolling a film-like experience with plain browser APIs.

Goal

The goal was to build a movie-like, interactive landing page where scrolling scrubs a real frame sequence forward and backward smoothly, and to layer in atmosphere (eyes that track the cursor, a black-flame hem, feathers, a storm) without any framework or build step.

Features

• Scroll-driven frame scrubbing: scroll position maps to a frame index and blends the two nearest frames so the sequence reads as continuous footage in both directions.
• Two image sequences, a 71-frame main intro and a 51-frame eyes-open Sharingan set.
• A mouse-tracked eyes act where the pointer walks a measured gaze lookup table so the pupils sweep left to right, with micro-parallax between the discrete frames.
• A WebGL “ghost cursor” smoke effect, drawn with a custom fbm fragment shader and a trail ring buffer.
• Canvas particle effects including drifting crow feathers and a layered black-flame (Amaterasu) hem with embers.
• A storm system of SVG lightning bolts with forks, screen flashes, and thunder synthesized live via the Web Audio API (filtered brown noise plus a sub-bass rumble), toggled by an audio button.
• Phase captions, a scroll progress readout, a custom cursor, and prefers-reduced-motion support.

Technologies

• Vanilla JavaScript driving all animation from scroll and pointer events, with frame-rate-independent easing.
• Canvas 2D for frame drawing, feathers, and the flame hem; WebGL for the shader-based ghost cursor.
• Web Audio API for procedurally synthesized thunder, plus SVG for lightning bolts and HTML/CSS for layout and typography.

How to Run

Clone the shared one-day-one-code repository and open the project’s folder. Because the page loads hundreds of image frames from the frames/ folder, it must be served over HTTP rather than opened via file://; run a static server such as python3 -m http.server 8000 and open the local URL. A live version is available at the demo link, and a wide desktop screen gives the best experience.

Technical Decisions

Frames are preloaded up front and the shown frame index is eased toward the scroll target, then cross-faded between neighbors, which removes the stair-stepping you would get from hard cutting 71 frames across several screens. The ghost cursor reimplements a Three.js smoke effect directly in raw WebGL to drop the dependency, and thunder is synthesized from noise and oscillators rather than shipping audio files, keeping the whole page self-contained.

What I Learned

I learned how to map scroll and pointer input onto a frame timeline smoothly, how to hand-write a WebGL fragment shader with fbm noise for a smoke trail, and how to synthesize convincing thunder from filtered noise and a sub-bass oscillator with the Web Audio API.

Notes

This is part of the shared one-day-one-code repository and is a small daily build for learning and demonstration. A preview image is included in the project folder.