Kinetics

Field notes

A dark SaaS hero where giant type slides with scroll inertia, glass stat cards tick like a live dashboard, and a frosted dock magnifies under the pointer. Pure DOM and Framer Motion — no canvas, no images.

Kinetics is a landing hero for a product that sells speed. Three lines of oversized type ride a tall sticky track: scroll, and each line slides its own way, trailing the page on a spring so the words feel heavy and physical. As the headline moves, three glass stat cards rise in with live numbers and scrolling sparklines.

At the bottom, a frosted dock magnifies its icons as the pointer passes, the way a desktop dock does. A lime-and-iris aurora drifts behind everything over a perspective grid that rushes toward the viewer. It is all HTML, CSS, and Framer Motion — no canvas, no images, no network beyond Google Fonts — and it settles into a still layout for anyone who prefers reduced motion.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

kinetics-saas/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ GlassDock.tsx
   │  ├─ KineticHero.tsx
   │  └─ LiveStats.tsx
   └─ lib/
      └─ loop.ts

Recut it

• Rename the product and rewrite the pitchsrc/components/KineticHero.tsx → KineticHero
• Swap the brand colorssrc/index.css → --color-volt
• Change how far each headline line slidessrc/components/KineticHero.tsx → <Row from to>
• Make the scroll feel heavier or snappiersrc/App.tsx → useSpring()
• Edit the live numberssrc/components/LiveStats.tsx → STATS
• Add or remove dock iconssrc/components/GlassDock.tsx → ICONS