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.

• Scroll-driven
• Pointer interaction
• SaaS
• Dark theme

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.

How it's built

• The floor loops by whole cells: the grid floor is just a CSS background, and each loop it moves by exactly three 64 px cells. The loop ends on the same pixels it started on, so the frames join with no seam.
• Sticky needs clip, not hidden: the full-screen stage sits on a 320vh track and uses overflow-x: clip to crop the sliding headline. overflow: hidden would make it a scroll container and break position: sticky.
• Dock math that can’t feed back on itself: the magnifying dock sizes each icon from a constant resting layout, not the live DOM, and measures the pointer from the dock’s center, which stays put while icons grow on both sides.
• Live numbers that still loop: stat values sample a quantized clock, Math.floor(t * 4) / 4, so they tick four times a second like a real dashboard. The sparkline’s two sines run 2 and 5 whole cycles and slide exactly one unit per loop, so the last frame matches the first.

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