Back to prompts
▲Kimi K3Design
Kimi K3 launch website (GSAP + Lenis)
A production-quality launch site for Kimi K3 with cinematic scroll choreography, referencing Lando Norris's site.
Loading the original X post…
Open original on XA production-quality launch site for Kimi K3 with cinematic scroll choreography, referencing Lando Norris's site.
The prompt
✦Kimi K3
| 1 | Build a complete, production-quality launch website for Kimi K3 using Next.js, React, TypeScript, GSAP ScrollTrigger, and restrained Lenis smooth scrolling. |
| 2 | |
| 3 | REFERENCE: |
| 4 | andonorris official website |
| 5 | |
| 6 | Study its cinematic scroll control and level of craft, but do not copy its layout, assets, branding, colors, copy, or exact animations. |
| 7 | |
| 8 | CREATIVE DIRECTION |
| 9 | |
| 10 | Create one continuous, scroll-controlled typographic film—not a conventional landing page with separate sections fading in. |
| 11 | |
| 12 | Central concept: “ENTER THE K.” |
| 13 | |
| 14 | The letter K is a portal. The user approaches it, enters it, travels through it, and exits it. Reuse the K as solid type, outline, mask, negative space, cropped geometry, grid, and navigation marker. |
| 15 | |
| 16 | Every scene must transform from the geometry already on screen: |
| 17 | |
| 18 | - Letters become masks and architecture |
| 19 | - Typography expands into backgrounds |
| 20 | - Lines become grids |
| 21 | - Numbers transform into new scenes |
| 22 | - Existing elements move, scale, crop, or align into the next composition |
| 23 | - Never reset the screen with a basic crossfade |
| 24 | |
| 25 | The motion should feel heavy, controlled, cinematic, and directly connected to scrolling. |
| 26 | |
| 27 | VISUAL SYSTEM |
| 28 | |
| 29 | Colors: |
| 30 | - Ink: #090A0A |
| 31 | - Warm paper: #F1EFE8 |
| 32 | - Gray: #B8B8B0 |
| 33 | - Dark gray: #222422 |
| 34 | - Signal: #D6FF3F |
| 35 | |
| 36 | Keep at least 80% monochrome. Use the signal color rarely for active details and one major climax. Use hard, meaningful theme changes: |
| 37 | |
| 38 | Dark → warm paper → dark → signal color → quiet dark. |
| 39 | |
| 40 | Typography is the main visual material. Use a heavy wide grotesk such as Mona Sans Variable or Archivo Black, with Instrument Sans or Mona Sans for interface text. |
| 41 | |
| 42 | Use extreme scale and intentional cropping: |
| 43 | - Hero type: 25–40vw |
| 44 | - Tight leading and tracking |
| 45 | - Asymmetrical editorial layouts |
| 46 | - Small uppercase technical labels |
| 47 | - Tabular numerals |
| 48 | - No generic centered headline/subtitle/button stacks |
| 49 | |
| 50 | SCROLL STORYBOARD |
| 51 | |
| 52 | Build approximately 900–1200vh of cinematic pinned scenes. |
| 53 | |
| 54 | 00 — LOADER |
| 55 | |
| 56 | Show “KIMI / K3,” a calibration line, and “INITIALIZING 000%.” Rapidly reach 100%. Transform the loader line directly into the hero composition. Maximum 1.5 seconds. |
| 57 | |
| 58 | 01 — KIMI K3 HERO |
| 59 | |
| 60 | Nearly black background with enormous KIMI typography, smaller K3, minimal navigation, metadata, progress rail, and “SCROLL TO ENTER.” |
| 61 | |
| 62 | During scroll: |
| 63 | - Metadata enters through clipped reveals |
| 64 | - “IMI” moves beyond the viewport while K remains |
| 65 | - K scales to 8–12× the viewport |
| 66 | - Use K as a mask containing subtle monochrome motion |
| 67 | - Move through its negative space |
| 68 | - Its diagonal stroke becomes the next scene |
| 69 | |
| 70 | Copy: |
| 71 | KIMI K3 |
| 72 | A NEW SCALE OF INTELLIGENCE |
| 73 | MOONSHOTAI / KIMI-K3 |
| 74 | AVAILABLE THROUGH OPENROUTER |
| 75 | |
| 76 | 02 — INSIDE THE K |
| 77 | |
| 78 | Create an abstract editorial environment from diagonal planes, cropped letter fragments, measurement lines, coordinates, and subtle texture. Avoid a literal sci-fi tunnel. |
| 79 | |
| 80 | Scrolling assembles: |
| 81 | |
| 82 | THINK |
| 83 | ACROSS |
| 84 | THE ENTIRE |
| 85 | PROBLEM |
| 86 | |
| 87 | Move planes at controlled depths. Transform the K’s diagonal into a horizontal line leading into the next scene. |
| 88 | |
| 89 | 03 — ONE MILLION CONTEXT |
| 90 | |
| 91 | Invert to warm paper. Pin the scene while vertical scrolling drives horizontal movement. |
| 92 | |
| 93 | Begin with a viewport-sized “1,” then spatially reveal: |
| 94 | |
| 95 | 1 → 1,0 → 1,048 → 1,048,576 |
| 96 | |
| 97 | Keep the number as the composition’s architecture. Move restrained document, code, and structured-data fragments beneath it. |
| 98 | |
| 99 | Include: |
| 100 | LONG CONTEXT |
| 101 | CONNECTED REASONING |
| 102 | COMPLETE PROJECT AWARENESS |
| 103 | FEWER ARTIFICIAL BOUNDARIES |
| 104 | |
| 105 | Enlarge the final “6” into a mask revealing the next dark scene. |
| 106 | |
| 107 | 04 — CAPABILITIES |
| 108 | |
| 109 | Create three full-screen typographic transformations, not cards: |
| 110 | |
| 111 | 01 / REASON |
| 112 | FOLLOW THE PROBLEM BEYOND THE FIRST ANSWER. |
| 113 | |
| 114 | 02 / CODE |
| 115 | MOVE FROM INTENT TO WORKING SYSTEMS. |
| 116 | |
| 117 | 03 / BUILD |
| 118 | PLAN. EXECUTE. VERIFY. ITERATE. |
| 119 | |
| 120 | Expand REASON’s font width. Align its strokes into code-like columns. Use those columns as CODE’s negative space, then collapse them into structural planes forming BUILD. |
| 121 | |
| 122 | 05 — K3 INDEX |
| 123 | |
| 124 | Keep a huge K3 stationary on the left. On the right, vertically move precisely aligned specification rows: |
| 125 | |
| 126 | MODEL — KIMI K3 |
| 127 | MODEL ID — MOONSHOTAI/KIMI-K3 |
| 128 | ACCESS — OPENROUTER |
| 129 | INTERFACE — CHAT COMPLETIONS |
| 130 | CONTEXT — 1,048,576 |
| 131 | STATUS — AVAILABLE |
| 132 | |
| 133 | As each row aligns with the K’s horizontal arm, turn it signal green. Compress all rows into one line at the end. |
| 134 | |
| 135 | 06 — CLIMAX |
| 136 | |
| 137 | Use the signal color as the background—the only large color moment. |
| 138 | |
| 139 | Display oversized black typography: |
| 140 | |
| 141 | NOT A CHAT WINDOW. |
| 142 | A WORKING INTELLIGENCE. |
| 143 | |
| 144 | Begin inside a giant letter, slowly zoom out until the full statement becomes readable, lock the words to a strict grid, then compress everything into “KIMI K3.” |
| 145 | |
| 146 | 07 — FINAL CTA |
| 147 | |
| 148 | Shrink the signal-colored KIMI K3 mark into a small header and return to near-black. |
| 149 | |
| 150 | Display: |
| 151 | |
| 152 | KIMI K3 |
| 153 | NOW AVAILABLE |
| 154 | Try the model through OpenRouter. |
| 155 | |
| 156 | CTA: TRY KIMI K3 |
| 157 | Technical line: moonshotai/kimi-k3 |
| 158 | |
| 159 | Use a sharp rectangular or underlined CTA. On hover, wipe the background horizontally and move the arrow 6–8px. End with a huge cropped K below the viewport. |
| 160 | |
| 161 | MOTION AND ENGINEERING |
| 162 | |
| 163 | - One GSAP timeline per major scene |
| 164 | - Restrained scrub values around 0.6–1.2 |
| 165 | - No bounce, spring, overshoot, or excessive scroll lag |
| 166 | - Reuse geometry between scenes |
| 167 | - Prefer transforms, masks, and clip-path |
| 168 | - Keep text as real HTML |
| 169 | - Use WebGL only if genuinely necessary |
| 170 | - Wait for fonts before calculating timelines |
| 171 | - Clean up GSAP contexts |
| 172 | - Recalculate animations at responsive breakpoints |
| 173 | - Maintain sharp typography and smooth 60fps motion |
| 174 | - No scroll traps or scroll-jacking |
| 175 | |
| 176 | Create a minimal fixed navigation: |
| 177 | K3 / 01 MODEL / 02 CAPABILITIES / 03 CONTEXT / 04 ACCESS / TRY K3 ↗ |
| 178 | |
| 179 | Update its color and progress state according to the active scene. |
| 180 | |
| 181 | RESPONSIVE AND ACCESSIBILITY |
| 182 | |
| 183 | Art-direct desktop, tablet, and mobile separately. On mobile, replace horizontal sequences with controlled vertical transformations while preserving the K-portal story. |
| 184 | |
| 185 | Support 1440, 1280, 1024, 768, 430, 390, and 360px. |
| 186 | |
| 187 | Include semantic HTML, keyboard navigation, focus states, sufficient contrast, skip link, and prefers-reduced-motion. Reduced-motion mode must remove pinning and zoom effects while keeping all content accessible. |
| 188 | |
| 189 | STRICTLY AVOID |
| 190 | |
| 191 | - Gradients and gradient text |
| 192 | - Glassmorphism |
| 193 | - Neon blobs or glowing orbs |
| 194 | - Bento grids and feature cards |
| 195 | - Rounded floating containers |
| 196 | - Fake terminals |
| 197 | - Random particles |
| 198 | - Stock illustrations |
| 199 | - Generic icons |
| 200 | - Constant fade-up animations |
| 201 | - Excessive blur |
| 202 | - Pill-shaped buttons |
| 203 | - SaaS-template layouts |
| 204 | - Decorative animation without narrative purpose |
| 205 | - Fake benchmarks, testimonials, or logos |
| 206 | |
| 207 | The final result should feel like a digital fashion editorial, motorsport identity, experimental type specimen, and interactive title sequence—not an AI-generated SaaS homepage. |
| 208 | |
| 209 | Build the complete functioning website. Prioritize strong static composition first, then add the connected scroll choreography. Test every transition, responsive breakpoint, navigation action, reduced-motion mode, and CTA. Fix all console errors and maintain smooth performance. |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
