Phototropism

Overview

Phototropism is a full-viewport interactive meadow marketing hero by SonoJS. Built with Vite, React 19, TypeScript, GSAP ScrollTrigger, Lenis, and Instrument Serif / Inter / IBM Plex Mono. A canvas 2D meadow (daisies, tulips, bells, dandelions) leans toward pointer light while scroll drives time-of-day from dawn to night. Headline Everything here leans toward you. with letter anchors plants grow toward, planted counter, and clock readout. prefers-reduced-motion softens the motion. Demo UI only - no backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Pointer-lit meadow

   Canvas plants lean toward the cursor; scroll shifts dawn-to-night lighting.

2. 02

   Everything leans toward you

   Instrument Serif headline letters act as growth anchors for the meadow.

3. 03

   Lenis + ScrollTrigger

   Smooth scroll timeline with planted counter, clock, and reduced-motion support.

4. 04

   Vite and fork-ready

   Vite 7 + React 19 + TypeScript + GSAP + Lenis - npm run build to dist/.

You get

• Full Vite + React 19 + TypeScript source (Phototropism)
• PhototropismHero.tsx + Meadow.ts canvas engine
• phototropism.css
• gsap + lenis + Instrument Serif / Inter / IBM Plex Mono fonts