2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
This is a single long-scroll explainer that walks a reader through how a language model turns an unfinished sentence into its next word. A sticky drawing stage sits beside a column of short caption cards, and as each card scrolls into view the stage does exactly one thing. The sentence splits into colored token chips with numbers underneath, the chips fly onto a two-dimensional map where related words cluster, curved lines show which earlier words each token pays attention to, and a bar chart lays out the odds for the next word. The last step hands the reader a temperature slider and a sample-again button, so they can watch a seeded dice roll pick a different ending.
It suits teachers, newsletter writers, course creators and product teams who need to explain a technical process to people who will never read a research paper. The captions are written in plain language, one idea per card, each with an everyday analogy and an inline glossary pill that expands when tapped.
The look is a calm editorial page: warm off-white paper, near-black Fraunces headlines, Inter for reading, JetBrains Mono for tokens and numbers, one vermilion accent and a few muted tints for word groups. Every visual is drawn in SVG, so the build stays small and there are no image licenses to track. A dark mode toggle, a mobile layout with the stage pinned above the cards, and a reduced-motion version that shows each step as a still figure are included.
To adapt it, change the brand, the headline topic, the example sentence and the audience. All copy and data, from token ids to map coordinates, attention weights and probabilities, live in one content file, so the same stage can explain code completion, phone keyboard suggestions or another step-by-step process.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# How Large Language Models Work
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A single long-scroll interactive explainer for [BRAND] titled "[TOPIC]". One unfinished example sentence, [EXAMPLE_SENTENCE], travels through a pinned SVG stage in eight steps while short caption cards scroll past: the sentence splits into token chips, the chips get numeric ids, the chips fly onto a 2D meaning map with labeled regions, curved attention arcs connect each word to the earlier words it relies on, a bar chart shows the top eight candidate next words, and a temperature slider with a seeded dice roll samples an ending the reader can re-roll. It closes with a five-icon recap strip, a glossary, a short FAQ and a footer. No model runs in the browser: every number is invented, illustrative and stored in one content file.
- Audience: [AUDIENCE]: people who use AI writing tools or hear about them at work and want an honest, visual picture of what happens inside, without math or code.
- Goal: By the end of the page the reader can explain in their own words the five stages (split, embed, attend, predict, sample) and has played with temperature long enough to see why the same prompt can give different answers.
- Tone: Calm, precise and friendly, like a good science magazine. Short sentences, one idea per card, an everyday analogy for each idea, no hype, no jargon without an inline definition. Never names real AI products, labs or people; always says "a language model".
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react, react-dom 18 (MIT), vite 5, @vitejs/plugin-react (MIT), typescript 5 (Apache-2.0), tailwindcss 3.4, postcss, autoprefixer (MIT), gsap 3 (core + ScrollTrigger) (GSAP Standard License (free, commercial use allowed)), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/inter (OFL-1.1), @fontsource-variable/jetbrains-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with the Vite react-ts template; single entry index.html with <title>[BRAND] · [TOPIC]</title> and <link rel="icon" href="./favicon.svg">.
- vite.config.ts: base './', build.sourcemap false, build.outDir 'dist', default minification.
- Import the three Fontsource variable packages once in src/main.tsx; register gsap ScrollTrigger once there with gsap.registerPlugin(ScrollTrigger).
- Define all colors as space-separated RGB CSS variables in src/index.css under :root (light) and [data-theme="dark"] (dark); map them in tailwind.config.ts theme.extend.colors as rgb(var(--x) / <alpha-value>). Tailwind darkMode: ['selector', '[data-theme="dark"]'].
- tailwind.config.ts fontFamily: display ['Fraunces Variable', 'Georgia', 'serif'], sans ['Inter Variable', 'system-ui', 'sans-serif'], mono ['JetBrains Mono Variable', 'ui-monospace', 'monospace'].
- Keep every piece of copy and data in src/content.ts: hero text, the eight step captions with analogies and glossary terms, the tokens array (text, id, category, mapX, mapY), ghost words, regions, attention rows, candidates (word, probability, continuation), recap labels, glossary, FAQ and footer text. Components only read from it. When the variable values change, rewrite the copy and regenerate all data in this file to fit the new example; keep the same shapes and counts.
- Put the sampler in src/lib/sampler.ts: mulberry32(seed) PRNG, applyTemperature(probs, T) computing softmax(ln(p_i) / T), and sample(probs, r) returning the index where the cumulative sum first exceeds r.
- Components: Header, Hero, Scrolly (StepCard list + Stage), Stage layers TokenLayer, MapLayer, AttentionLayer, BarsLayer, TemperatureControls, then Recap, Glossary, Faq, Footer. One useReducedMotion hook reading matchMedia('(prefers-reduced-motion: reduce)').
- Stage animation model: React state activeStep (0-7) set by one ScrollTrigger per StepCard (start 'top 60%', end 'bottom 60%', onToggle when isActive). Each step change runs a GSAP timeline that tweens SVG attributes and transforms from the current state to that step's target state (overwrite: 'auto'), so scrolling backwards works the same as forwards.
- Theme: on load read localStorage key 'theme' inside try/catch, fall back to prefers-color-scheme; set data-theme on <html>; the header toggle writes it back inside try/catch.
## Variables
- [BRAND] — Publication or series name (default: "Lantern Guides"). The invented publisher of the explainer, shown in the header wordmark, hero kicker and footer.
- [TOPIC] — Explainer headline (default: "How a language model picks the next word"). The question the page answers; used as the hero headline and in the <title>.
- [EXAMPLE_SENTENCE] — Unfinished example sentence (default: "After a rainy walk, the sleepy dog curled up by the"). The input that travels through every step. Pick one that splits into 12-16 tokens, contains at least one word that breaks into two pieces, and has an obvious but not certain next word.
- [AUDIENCE] — Who the page is for (default: "curious readers with no engineering background"). Sets the vocabulary and analogies of every caption.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/how-large-language-models-work in the footer (default: yes; delete this line to remove it)
The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
Join Pro early access →DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "How Large Language Models Work"
colors:
paper: "#F6F1E7"
surface: "#FFFCF6"
ink: "#1B1A17"
ink_muted: "#5E584D"
rule: "#DDD4C3"
accent: "#E4572E"
tint_animal: "#9DBFA8"
tint_home: "#E2C27A"
tint_action: "#B7A6D6"
tint_weather: "#9FC3D9"
tint_glue: "#D4CCBD"
dark_paper: "#16151A"
dark_surface: "#211F26"
dark_ink: "#EDE7DA"
dark_ink_muted: "#A39C8E"
dark_rule: "#38353E"
dark_accent: "#FF6B43"
typography:
display_hero_headline_72px_desktop_44px_mobile_weight_600_opsz_144_letter_spacing_0_02em_line_height_1_02_step_card_titles_28px_24px_weight_600_section_headings_44px_32px_weight_500_sampled_sentence_26px_italic_weight_400: { family: "Fraunces", weights: [400, 500, 600] }
text_hero_deck_21px_line_height_1_5_caption_body_17px_line_height_1_6_ui_labels_14px_weight_500_faq_and_glossary_16px: { family: "Inter", weights: [400, 500, 600] }
mono_token_chips_15px_weight_500_token_ids_11px_step_counters_like_03_08_12px_uppercase_letter_spacing_0_08em_percentages_temperature_value_dice_number: { family: "JetBrains Mono", weights: [400, 500, 600] }
spacing: "8px base unit. Content max-width 1200px with 32px side padding desktop, 16px mobile. Sections 128px vertical padding desktop, 80px mobile. Scrolly grid on desktop (>=1024px): caption column 38% on the left, 4% gap, stage column 58% on the right. Caption cards max-width 420px, padding 28px, each card in its own step wrapper with min-height 100vh and the card vertically centered; the last step wrapper is 160vh so the reader can play with the slider while the stage stays pinned."
radius: "Token chips 6px, caption cards and stage panel 14px, glossary pills and buttons fully rounded (999px), bars 4px on the right end only, map regions are soft ellipses."
---
# How Large Language Models Work — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **paper** `#F6F1E7` — Light page background
- **surface** `#FFFCF6` — Light caption cards, stage panel, FAQ items
- **ink** `#1B1A17` — Headlines, body text, chip labels
- **ink-muted** `#5E584D` — Secondary text, token ids, axis labels, captions under figures
- **rule** `#DDD4C3` — Hairlines, card borders, empty bar tracks, map frame
- **accent** `#E4572E` — The one saturated color: focus chip, attention arcs, top bar, progress bar, slider thumb, chosen word underline, links
- **tint-animal** `#9DBFA8` — Sage: chips, dots and map region for animals and living things
- **tint-home** `#E2C27A` — Sand: map region for home and warmth (candidate next words)
- **tint-action** `#B7A6D6` — Lavender: chips and region for actions and states (walk, sleep, curled)
- **tint-weather** `#9FC3D9` — Sky: chips and region for weather words
- **tint-glue** `#D4CCBD` — Warm gray: small glue words, word pieces and punctuation
- **dark-paper** `#16151A` — Dark mode page background
- **dark-surface** `#211F26` — Dark mode cards and stage panel
- **dark-ink** `#EDE7DA` — Dark mode text
- **dark-ink-muted** `#A39C8E` — Dark mode secondary text
- **dark-rule** `#38353E` — Dark mode hairlines
- **dark-accent** `#FF6B43` — Dark mode accent; tints keep their hex but chips use them at 85% opacity with dark-ink labels switched to #16151A
## Typography
- **Display: hero headline (72px desktop / 44px mobile, weight 600, opsz 144, letter-spacing -0.02em, line-height 1.02), step card titles (28px / 24px, weight 600), section headings (44px / 32px, weight 500), sampled sentence (26px italic weight 400)** — Fraunces (OFL), weights 400/500/600. Self-host the font files.
- **Text: hero deck (21px, line-height 1.5), caption body (17px, line-height 1.6), UI labels (14px weight 500), FAQ and glossary (16px)** — Inter (OFL), weights 400/500/600. Self-host the font files.
- **Mono: token chips (15px weight 500), token ids (11px), step counters like 03 / 08 (12px uppercase, letter-spacing 0.08em), percentages, temperature value, dice number** — JetBrains Mono (OFL), weights 400/500/600. Self-host the font files.
## Spacing & shape
- Spacing: 8px base unit. Content max-width 1200px with 32px side padding desktop, 16px mobile. Sections 128px vertical padding desktop, 80px mobile. Scrolly grid on desktop (>=1024px): caption column 38% on the left, 4% gap, stage column 58% on the right. Caption cards max-width 420px, padding 28px, each card in its own step wrapper with min-height 100vh and the card vertically centered; the last step wrapper is 160vh so the reader can play with the slider while the stage stays pinned.
- Radius: Token chips 6px, caption cards and stage panel 14px, glossary pills and buttons fully rounded (999px), bars 4px on the right end only, map regions are soft ellipses.
## Motion
- Discrete step transitions, not scrubbed: when activeStep changes, a GSAP timeline of 0.6-0.9s with ease power3.inOut moves the stage to the new state; elements stagger by 0.03-0.05s in reading order.
- Only the 2px progress bar under the header is scrubbed (ScrollTrigger scrub: true over the whole scrolly section, scaleX 0 to 1).
- Hero sentence types in once on load at 28ms per character with a blinking 2px accent caret (1s steps blink) that stays at the end.
- Attention arcs draw in with stroke-dashoffset from full length to 0 over 0.6s, heaviest arc first.
- Bars grow from width 0 with power2.out over 0.7s, stagger 0.05s; percentages count up in step with the bar.
- Temperature changes re-tween bars over 0.35s power2.out; the dice icon rotates 360 degrees over 0.5s on every sample; the chosen word fades in with a 6px rise.
- Caption cards fade from 40% to 100% opacity and lift 12px when their step becomes active; inactive cards rest at 40% opacity.
- Hover and focus micro-interactions: chips lift 2px and show a 1px accent outline, glossary pills invert to accent fill, buttons darken 6%.
- prefers-reduced-motion: no typing, no tweens and no pinning. The stage is not sticky; instead each step card is followed by a static SVG figure of that step's final state (same Stage component rendered with a fixed step prop). The temperature figure stays fully interactive, bars just update instantly.
## Imagery
No photographs or raster images. Every visual is flat 2D SVG drawn in code: rounded token chips tinted by word group, a framed map with soft tinted ellipse regions and small caps region labels, dots with labels, smooth quadratic attention arcs in the accent color, horizontal bars on hairline tracks, a cumulative probability strip with a triangle marker, and a hand-made SVG wordmark mark (a small circle inside a rounded square with a short flame-like teardrop, drawn with two paths). Lucide line icons at 1.75px stroke for UI and the recap strip.
## Tone
Calm, precise and friendly, like a good science magazine. Short sentences, one idea per card, an everyday analogy for each idea, no hype, no jargon without an inline definition. Never names real AI products, labs or people; always says "a language model".
---
— Prompt by VibeFather · https://vibefather.ai/t/how-large-language-models-work · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown