Overview
Hanakura is a sign-up page for apps and SaaS products with a live 3D scene beside the form. A cherry branch in bloom hangs over a still pond, petals and a few whole flowers fall a little differently every time, and a glowing retro TV rests on a dark stone with the brand on its screen. The pond mirrors the stone and the TV and ripples where petals land. The scene is built in three.js with a warm low sun, real soft shadows on the stone and the TV, light haze and floating motes. Moving the cursor over the scene leaves a soft wake on the water, and a click drops a stronger ring. The form sits on the left of one centred card: the Hanakura logo, a short headline, email and password fields, a terms checkbox, a Create Account button, Google, Apple and Twitter buttons and a link to log in. On phones and narrow screens the scene moves above the form. Phones get a lighter scene automatically, with fewer petals and smaller textures. Reduced motion shows a still frame, and if the browser cannot run WebGL the page shows a fallback message while the form keeps working. The project is a plain Vite site with JavaScript modules and CSS, no framework. Colors and fonts come from CSS variables, the TV redraws whatever logo you drop in, and petal amounts are two constants. pnpm build writes a static site you can host anywhere. This is a frontend template: submitting the form creates nothing, and the social buttons are not connected. Wire them to your own auth provider before going live. The Hanakura brand and copy are placeholders. Included: the full Vite source, the cherry branch and pond code, stone and TV models, sky and blossom layers, a quick-start, hosting and customization README, AGENTS.md and CLAUDE.md for AI coding agents, and credits.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
