Immersive Framer Web Experience Inspired by a Ronin PaintingImmersive Framer Web Experience Inspired by a Ronin Painting
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
KAGE 🍁 (影, “shadow”) is an immersive web experience built from a single painting: a ronin on a cliff above a sea of clouds, under a red sun that never quite sets.
The site opens like a film. A short launch sequence plays in reverse, pulling the blade’s crimson arc back into stillness, then dissolves into the painting itself, which comes alive. From there, the visitor moves through a prologue on washi paper, the seven virtues of bushidō in red kanji, and a gallery of quiet details from the scene, before ending under the red sun.
What went into it: • Depth from a single image: the artwork is separated into layers, so the samurai moves against the cloud sea as you scroll and move the cursor • A launch film that hands off into the live painting with no visible cut, with the interface revealed only once it ends • Falling sakura petals, drifting mist and a breathing sun glow, all as custom code components • Japanese editorial typography pairing Shippori Mincho with Zen Kaku Gothic, plus a red hanko seal and kanji chapter navigation • Text that surfaces from blur, chapters revealed on scroll, and subtle hover motion throughout • Fully responsive, with layouts tuned for desktop, tablet and mobile and a reduced-motion fallback Visit: KAGE 🍁
Built in Framer, with custom React components.
Rafee 's avatar
The layered parallax on the samurai is so smooth. Did you build the petals in custom code?
Ayush's avatar
Yes, it was built in the custom code.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started