Build a single-file HTML landing page for "Starfork Studio", a fictional nine-person indie game studio, and its upcoming game "Desk Dash!", a cosmic endless runner across the messiest desk in the galaxy. The page should feel like the game's own menus: a deep indigo night full of floating toy shapes, a cast of cute object characters that are properly animated like sprite sheets, white glossy pill buttons, and something you can actually play. Fictional studio, games, team, players and roles, labelled as such in the footer. No images and no canvas: every character, prop, cube, ring and the planet are inline SVG or CSS, driven by one inline script. STACK - Google Fonts: Bricolage Grotesque 400-800 with the optical-size axis (all text; big headings at weight 700, letter-spacing -0.045em), Lilita One (the game logo and game titles), JetBrains Mono 500/700 (eyebrows, labels, HUD). THE SYSTEM - Colours: page #07041a, text #f4f1ff, muted #aaa4d8 / #9d96cf, mint #93f7cc (eyebrows, selection, focus rings), pink #ff8fd8, lilac #c9b8ff, sky #86b6ff, coin orange #ffb347 / #ffc46b. Sections sit on soft radial glows of violet, pink and mint. - Buttons: the primary is a white-to-lilac vertical gradient pill (#fff to #e6defc) with dark ink text, an inset bottom shade and a lilac glow, lifting 2px on hover. Ghost buttons are translucent white with a blurred backdrop. - Eyebrows are "01 — The crew" style mono labels in mint. Gradient words use a pink, lilac, sky clipped gradient in Lilita One. - A .stars utility paints a field of dot stars from stacked radial gradients. THE CHARACTER RIG - sprite(el, kind, pose, fps, once, inplace) draws one of eight characters in a 120x120 viewBox with feet on the same line: Pip (orange pumpkin wizard, blue hat with a glowing tip, magic pen), Nib (pink spiral notebook with a green shield), Volt (green TV robot with a dark screen face and orange arms), Drip (blue drop in a party hat and bow tie), Gem (green cube with a plus badge), Puff (peach flower cloud with blush), Kit (red toolbox with a sprout) and Tome (pink book with a bookmark). - Each instance gets its own gradient ids: a body gradient, a core whose colours slowly hue-shift (SMIL), a rim light, a sheen, glowing eyes with lids in a body-mix colour, a soft shadow. A palette per character (light, mid, deep) and a "feel" (bob height, squash, lean) make each move differently. - Poses are CSS classes on the root: idle, walk, talk, run, punch, jump, death. Every keyframe holds whole frames with steps(1, end), like a hand-timed sprite sheet; frames per cycle are idle 24, walk 16, talk 8, run 8, punch 8, jump 8, death 16, and --dur = frames / fps. Body, feet, shadow, accessory, eyes, mouths and an impact sparkle each have their own track. Idle has a signature fidget per character (Pip twirls the pen, Nib hops, Volt waves, Drip jiggles, Gem rocks, Puff breathes, Kit rustles, Tome swings), and death has specials (Drip melts, Puff poofs, Volt's screen switches off). Jump and death can play once and hold the last frame. THE LOADER (covers the first seconds) - A tiny inline script in
adds .sf-wait to , which hides the page and shows a full-screen loader, so the first paint is cheap. The loader is a mini lap of the game on the hero's night sky with a planet rim: the "Starfork Studio presents" pill, the gradient "Desk Dash!" logo, and Pip running a purple track with moving seams, collecting six coins while a six-slot coin meter fills, with a status line (Waking the crew…, Polishing the cubes…, Stacking the desk clutter…, Tuning the jump…) and a mono percentage. - Progress is real: the main script dispatching 'sf:ready' once every character is drawn, the display fonts loading (document.fonts.load), and window load. It also creeps on its own, holds at 97% until all three are in, shows at least ~0.9s, then Pip throws the victory punch, "Ready!", and the loader fades and scales out while the page fades in. Fallbacks at 12s and 15s so it can never trap the page. SECTIONS (data-section in order) 1. nav: a fixed floating glass pill (blurred, hairline border) with a star logo mark, five links and a "Play the demo" button. 2. hero: full height, a radial indigo sky with stars, pink and blue glow blobs, and five glossy floating toys drawn in the same style as the characters (a mint crystal block, a magenta ring, a small blue gem, an orange hourglass coin and a violet cube): each has a body gradient, a sheen, a rim light and a molten core of rotating triangles merged by an animated goo filter, glowing in its own colour; plus twinkling four-point sparkles, all drifting. A "NEW · Starfork Studio presents" pill, then the h1 game logo "Desk Dash!" in Lilita One at clamp(114px, min(21vw, 25.5vh), 276px), line-height 0.84, each letter its own pastel gradient with a small offset and tilt that bobs out of phase (the "!" in a pale-to-periwinkle blue), with a hard and a soft drop shadow. A sub, "Play a lap" and a ghost "Meet the crew", and "Coming 2026 · PC · Switch". At the bottom, the curve of a planet: an SVG circle of radius 1700 with a hazy violet halo, a radial fill, faint latitude and meridian lines, a sheen and a pink-white-blue rim light. The eight characters stand on it at staggered heights following the curve, and every 2.6s a random one throws a punch. 3. crew: "Pick a character." A panel with a 4x2 radiogroup of square portraits (arrow keys; the picked one gets a mint border and glow) beside a preview card: a mini stage with stars and a grid floor showing the character large (popping in on change), a "pose · frames" label and a live fps readout, seven segmented pose buttons, a frame-rate select (6, 12, 24, 60 f/s), name, role, a quote, three gradient stat bars, and a button that reads "Accept Nib" (or "Ready to run" once accepted), which makes them the runner, shows a toast and scrolls to the demo. 4. play: "Thirty seconds of Desk Dash!" with keycaps for Space, Up and W. A 420px stage in a glass bezel: stars, a far layer of desk lamps, desks and a moon scrolling at 0.18x, a purple ground with moving seams, and a HUD with a conic countdown dial and a six-slot coin meter. The runner uses the rig (run, jump once, punch on a win, death once on a crash) at the frame rate picked above, jumps with Space, Up, W, a click or a tap (gravity 2100, jump 760 scaled by the character), and meets desk clutter (books, mug, no-wifi sign, hurdle, speaker) every 1.1-2.1s, none in the last two seconds, with six bobbing coins (hourglass, pencil) at two heights. Speed ramps up. A crash ends on "Crunch!"; reaching 30s ends on "Shipped!", or "Perfect run!" with all six coins: up to three stars, firework bursts and confetti, and "Run it back". A "Ready?" overlay names the runner before the start. 5. games: "Tiny worlds, big runs." Three cards with live character scenes: Desk Dash! (Drip walking, Pip running and Volt talking on a planet; a mint "Coming 2026" tag), Moonmilk (Puff under a big moon, 2024) and Paper Comets (a cube, a ring and Nib jumping, 2022). Cards lift on hover. 6. studio: "Nine people, one cat, a lot of cubes." Copy beside a 2x2 grid of big coloured numbers (9 people on the team, 3 games shipped, 2.4M players so far, 1 office cat), then three value cards (Makers, Thinkers, Organizers) with small geometric icons. 7. careers: "Find your role." A three-question quiz in a glass card (Are you a Maker, Thinker, or Organizer? / A build breaks at 6pm… / Your favourite part of a game is…), radio rows that light up mint, Back and Next (disabled until answered, "See my role" last), progress dashes. The result shows the matching character talking, "You are a thinker", the role (Gameplay animator, Systems designer, Associate producer), who you would work with, tags, Retake and a demo-only Apply. 8. footer: a CTA card ("Take one more lap.") with the whole crew lined up and two buttons, then the logo, a pulsing "Now building: Desk Dash!" pill, three link columns, the fictional legal line and a back-to-top pill. THINGS THAT BREAK - Give every character instance unique gradient, mask and filter ids, or all copies paint with the first one's colours. - Size every mask region to the art (maskUnits userSpaceOnUse with a box just past the viewBox). A huge default region is rasterised every frame for every character and drops the page to about 10fps. - Pose changes must swap the root's classes, not rebuild the SVG, so the keyframes restart cleanly and the colour cycle keeps its phase. - Move the runner, obstacles and coins with transforms each frame; do not re-render the stage. - Inline-block letter spans in the logo must have no whitespace between them, or the word spreads apart. - The hidden toast sits below the fold with opacity 0 and no pointer events. THE FLOOR - One h1 (the game logo, with a visually hidden text copy), real buttons, a radiogroup with arrow keys, native radios for poses and quiz answers, a labelled stage with role=application, a status line for run results, visible mint focus rings. - Under 1000px the hero shows six of the cast; under 760px the nav links and floating pieces hide, four of the cast remain and the stage is 340px tall. No horizontal scroll at 390px. - Reduced motion stops the drift, twinkles, cubes, logo bob, character poses and fireworks; the runner still plays because the visitor starts it.