meghamittal0920/naruto-sagemode

Naruto Sage Mode Awakening is a single page website built as a showcase animation, styled after the kind of flashy demo pages you would see on Awwwards. It tells a short visual story of the anime character Naruto transforming from his base form into Sage Mode, using scroll driven animation instead of clicks or video controls. When someone opens the page, a preloader stamps in a stylized title with a chakra syncing counter and a flash of light. Then a fullscreen hero video plays under a dark cinematic overlay with a large animated title, drifting particles, and occasional thunder flickers. As the visitor scrolls further, a pinned section plays out the actual transformation: three images, base form, hand seal, and Sage Mode, are revealed one after another using jagged lightning crack effects, screen flashes, and camera shake, with on screen captions and a status readout changing to match each stage. Technically, the whole thing lives in one HTML file with inline styles and scripts, no build step or framework needed. It uses the GSAP animation library with its ScrollTrigger plugin to tie the animation timing to scroll position, canvas drawing for the lightning bolts and particle effects, and CSS clip path to create the jagged crack reveal between images. It respects the reduced motion accessibility setting and works across modern browsers. To run it, you need a small local web server, such as the npx serve command or Python's built in http server, rather than opening the file directly, because browsers block local video loading otherwise. The project structure is simple: the main HTML file, a folder for the hero video, and three numbered images for the three transformation stages. The README explains how to swap in your own video and images, and includes a tuning table for adjusting things like scroll length, crack roughness, and animation timing. The README states the code itself is free to use and modify, but the Naruto artwork, video, and character trademarks belong to their original rights holders and are only included here as fan or demo assets, meant to be replaced before any real publishing.