# Website Prompt: Kimi (`kimi`)

- **Category**: Website Template (Free)
- **Tech Stack**: `landing page, threejs, nextjs`
- **Tags**: `landing page, threejs, nextjs`
- **Tone & Mood**: `light` · `technical, luxe`
- **Preview Image**: https://storage.getlayers.ai/templates/kimi-04a9449ab2.webp
- **Preview Video**: https://storage.getlayers.ai/templates/kimi-04a9449ab2.mp4
- **Design Keywords**: `004, 012, 02d2e3, 1440, 200px, 2560, 2700, 3d, 3d helmet, 3d model, 4px, 5px, 60fps, 96px, accent, across, additive, after, alike, all, all caps, along, alternating, and, animated, antonelli, apart, aqua, arms, arrive, arrives, assemble, assembling, athlete, athlete site, austrian gp, automotive, away, axes, back, backdrop, band, banded, becomes, been, behind, belgian gp, beside, bio, biography, black, bleeding, block, blocks, bloom, blowing, bold, bologna, both, bottoms, bracket, brackets, braking, brand, breaking, breaks, burn, burn in, burn-in, burns, button, calendar, canvas, canvas 2d, canvas-2d, capsules, car, card, card stack, card-stack, cards, career, career timeline, carries, cars, cascaded, chain, chamfer, chamfered, championship, checkerboard, checkered, checkered flag, chequer, chequerboard, chequered, chequered flag, chin, circuit, clip path, clip-path, clockwise, closed, column, comes, coming, compiled, completing, composition, condensed, condensed type, connectors, container query, container-query, contour, contour lines, contours, conversational, cooling, copy, corner, corner brackets, corner-brackets, cornered, corners, counter, covered, cqw, crawl, crawling, crawls, creeping, crosses, crosshair, crown, cursor, cursor reveal, cursor trail, cursor-reveal, cursor-trail, curtain, curvature, cut corner, cyan, dark, darkens, dashboard, dashed, data, degrees, depth, depth map, depth parallax, depth-parallax, design, design system, designer, device tiers, dim, display, dissolve, dot, dot map, dot matrix, dot-matrix, dots, down, draco, draw on, drawn, draws, driver, driver site, dutch gp, each, edge, editorial, education, electric cyan, electric-cyan, ends, esports, every, everything, exists, f1, f1 driver, f7fafb, face, faces, faint, fake 3d, fan site, field, figma, figure, figures, filament, filled, filling, fills, filters, finish, first, five, flag, floods, flow, foot, footer, for, formula, formula 1, formula one, four, fragment shader, frames, from karts, front, full, gallery, gaming, gapless, gated, ghost, glb, globe, glow, glowing, glsl, gltf, gp, grand prix, greys, grid, grid01, grido1, grotesk, ground, halftone, hand, hard, hard edges, has, hdr, head, helmet, helmet model, helmet-model, hero, his, hot, hover, hover dim, hover reveal, hover-dim, hub, hud, hungarian gp, image gallery, inset, inside, instrument, instrument panel, instrument-panel, into, invisible, isn, iso, iso lines, iso-lines, italian, italy, its, itself, journal, journey, just, karting, kimi, kimi antonelli, landing, landing page, landmass, lap, last, lattice, layers, lenis, letter, letter reveal, letter-reveal, light, light mode, lighting, like, line, line draw, line drawing, line-draw, lines, liquid reveal, liquid-reveal, live, lives, loader, loading screen, map, marched, marching squares, marching-squares, marker, markers, marks, mask, masthead, mastheads, melting, mercedes, mercedes-amg, merch, meter, middle, mobile, monochrome, motor sport, motorsport, mouse, name, nav, near, near-black, near-white, news, next, next race, next.js, nextjs, no radius, no-radius, noise, normal, normal map, normal-map, off, off-white, one, one page, one-page, one-pager, only, open, opens, ordinary, oswald, other, out, over, own, paced, packed, paddock, page, panel, panels, parallax, parity, pass, passes, path, path animation, path-animation, pbr, per, percent, performance, period, personal brand, personal site, petronas, phone, photo, photograph, photographs, photography, photos, pin, ping, pinned, pins, pit lane, pit wall, pitches, place, plain, plate, plates, podium, point, pointed, pointer, points, portfolio, portrait, position, positions, preloader, progress, progress bar, progress-bar, pulse, pure, race, race calendar, race driver, race track, racing, racing driver, racing helmet, racing team, radar, rail, reaches, react, react spring, react-spring, recede, recedes, recent, relight, relit, report, resolving, responsive, rest, resting, results, reticle, returns, reveal, ribbon, riding, rings, rises, roll, rolling, rookie, round, row, rows, running, same, sans-serif, scan, scanline, scanning, scans, scene, schedule, screen, scroll, scroll animation, scroll driven, scroll-driven, scrolling, scrollytelling, seam, season, second, seconds, set, settle, settles, seven, shader, sharp, shows, silhouette, silverstone, sine, single accent, single page, site, sits, six, slow, smooth scroll, smooth-scroll, smoothed, socials, solid, sonar, spa, space, space grotesk, spark, speed, spinning globe, spinning-globe, sponsor, sponsorship, sport, sports, sportsman, spring, springs, square, squares, squaring, stack, stacked sections, stagger, staggered, standing, standings, stat, statistics, stats, stepped, stepping, sticky, sticky stack, sticky-stack, store, straights, stroke dashoffset, stroke-dashoffset, suit, supercar, svg, svg animation, systems, tablet, tailwind, tailwind v4, teal, team, technical, telemetry, text animation, text reveal, text-reveal, that, the, their, then, there, third, thread, three, three.js, threejs, thresholded, through, tiered, timeline, times, tip, tokens, top, topo, topographic, toward, track, trail, trailer, turn, turning, turns, turquoise, types, typewriter, under, uppercase, veil, video, viewport, wait, warped, wave, webgl, when, where, wherever, which, while, white, whole, whose, wire, wireframe, wireframe scan, word reveal, word-reveal, world map, worn, yaws, years, you, your`

---

## Visual Overview
> A Formula 1 driver's site where the helmet burns off his portrait as the page loads and comes back only where your cursor has just been, the season's circuit runs a lap when you reach it, and every block after that lands over the last one like a stack of cards.

---

## Complete AI Build Prompt

Copy and paste the prompt below into Claude, Cursor, Antigravity, Bolt, Lovable, or v0:

```markdown
# Recreate this site as a single HTML file: KIMI

You are an expert creative front-end developer. Produce a **single self-contained `index.html`**
that reproduces the **Kimi** website below **exactly** — same layout, copy, visuals, motion, shaders, and interaction.
Pure HTML/CSS/JS in one file: no build step, no framework, no bundler. ES modules inline in a
`<script type="module">`. Use an `<script type="importmap">` for **Three.js** (`https://esm.sh/three@0.165.0`) and **Lenis** (`https://esm.sh/lenis@1.1.13`).

## 1. Aesthetic & Design System
- **Core Concept**: A Formula 1 driver's site where the helmet burns off his portrait as the page loads and comes back only where your cursor has just been, the season's circuit runs a lap when you reach it, and every block after that lands over the last one like a stack of cards.
- **Tone**: Light mode with technical, luxe styling.
- **Color Tokens**:
  - `--bg-void`: `#07080a` (Carbon track black)
  - `--bg-panel`: `rgba(14, 17, 22, 0.78)`
  - `--ink-primary`: `#f4f6f8`
  - `--ink-muted`: `#8a939e`
  - `--accent-telemetry`: `#00f59b` (Mercedes/Petronas telemetry emerald)
  - `--accent-warn`: `#ff3b30` (Brake/peak RPM crimson)
  - `--line-hairline`: `rgba(255, 255, 255, 0.08)`
- **Typography**:
  - Display / Headlines: `'Syne'`, `'Monument Extended'`, or `'Inter'` 800 uppercase, tight tracking (`-0.04em`), line-height `0.92`.
  - Telemetry / HUD Readouts: `'JetBrains Mono'` or `'IBM Plex Mono'`, `11px` uppercase, letter-spacing `0.12em`, `tabular-nums`.

## 2. Core Interactive & WebGL Architecture
- **Helmet Burn-Off Shader**: Full-bleed WebGL canvas rendering a portrait/helmet layer with a 2D simplex noise burn-off transition (`uProgress`, `uEdgeGlow`, `uMouse`). As the loader completes and as the user scrolls, the visor/helmet dissolves with a glowing teal-and-ember edge to reveal the driver portrait underneath, and re-forms when scrolling back to top.
- **Halftone & Chequered Dissolves**: Custom fragment shader pass applying dynamic dot-matrix halftone and chequered flag displacement across section transitions.
- **Interactive Circuit Trace**: SVG + Canvas 2D spline rendering the Monza/Imola circuit telemetry trace with a glowing live position dot that advances with scroll velocity and displays real-time G-force (`4.8G`), gear (`8TH`), and throttle (`100%`) readouts.

## 3. Motion, Physics & Scroll System
- **Smooth Scrolling**: Initialize Lenis smooth scroll and bind it to a unified `requestAnimationFrame` ticker loop.
- **Spring Solver**: Implement a hand-written spring physics class `Spring(value, tension = 180, friction = 24)` that steps every frame using semi-implicit Euler integration.
- **Scroll Triggers**: Compute normalized scroll progress `p = clamp((scrollY - start) / (end - start), 0, 1)` for every section to drive parallax, 3D camera keyframes, and text reveals.
- **Pointer Tracking**: Track normalized pointer coordinates `[-1, 1]` and pointer velocity to feed both the WebGL uniforms and magnetic UI buttons.

## 4. Page Sections & DOM Structure
1. **Preloader & Visor Burn-In**: Telemetry boot sequence (`00.0% -> 100.0%`) with RPM bar and shader dissolve reveal.
2. **Hero Stage (GRIDO1 / Kimi Antonelli)**: Towering driver number `#12`, live telemetry HUD corners, interactive helmet dissolve canvas, and scroll velocity meter.
3. **Sticky Telemetry Stack**: 4 pinned full-viewport cards detailing Aero Dynamics, Power Unit Telemetry, Lap Sector Comparison, and Junior Formula Championship progression.
4. **Interactive Circuit Breakdown**: Scroll-scrubbed track map with corner-by-corner apex speeds, braking zones, and driver audio transcript snippets.
5. **Partner & Paddock Footer**: Chequered shader curtain reveal with social links, press kit trigger, and live championship standings ticker.

## 5. Polish, Performance & Accessibility
- Cap WebGL `devicePixelRatio` at `2.0`.
- Handle window resize cleanly without layout thrashing.
- Include `prefers-reduced-motion: reduce` fallback that settles springs immediately and slows shader time uniforms.
- Use `font-variant-numeric: tabular-nums` on all live counters, coordinates, and pricing figures.
```
