Loads the original post from X.
The original recipe
From the creator7,591 chars
Using Vanilla JavaScript and Canvas 2D, create an animation in a single self-contained HTML file where an orange pixel character races at ultra-high speed across a rainbow floor in space, stylishly dodging meteors and beams that come at it one after another. Do not use any external assets, libraries, or network requests. No user controls are needed; make it a seamless loop where the character automatically keeps dodging as a demo. Rendering - Render everything to an off-screen canvas at a fixed logical resolution of 160x90, then transfer it to a full-screen display canvas. Scale it up by the largest integer multiple that fits the window and center it. Fill margins with black. Set imageSmoothingEnabled = false and specify CSS image-rendering: pixelated. - Snap all drawing to integer coordinates on the logical canvas. Do not use sub-pixel positions, anti-aliasing, gradients, shadowBlur, or rotated drawing. - Use a fixed palette of about 32 colors: black to deep navy and purple for space background, three shades of orange for the character (body around #CD7B5E, bright highlights, dark shadows) plus black for eyes, 7 colors for the rainbow floor (red, orange, yellow, green, cyan, blue, purple) plus their dark variants, rocky and lava colors for meteors, white, cyan, and magenta for beams. Every pixel must come from this palette. Character - Accurately reproduce the following 12x8 pixel silhouette (1 cell = logical 1 pixel): - Body is an 8x8 wide rectangle (columns 2–9). - Arms protrude 2x2 wide from the body's left and right (columns 0–1 and 10–11, rows 2–3). - Eyes are two black 1x1 pixels in row 1, columns 3 and 8. - Legs are four 1-wide in rows 6–7 (columns 2, 4, 7, 9). Space between legs is background color. - Instead of flat color, add 1px highlights on top and left edges, and 1px shadow color on bottom and right edges to give a 16-bit 3D look. - Running motion is a 4-frame cycle alternating the four legs in pairs up and down. Speed up the cycle based on velocity. - Parameterize poses (vertical bounce, forward lean, squash & stretch, arm up/down). Express squash & stretch by changing width/height by just 1–2 integer pixels. Interpolate parameters smoothly but quantize to pixel grid every frame, so it looks like classic dot-animated sprite animation at around 12fps even in a 60fps loop. Rainbow Floor - The character runs horizontally rightward near the left 1/3 of the screen in a side-scrolling setup. The floor is a rainbow band of 7-color horizontal stripes (each color 1–2px thick), stretching across the screen with a gentle undulation (sine wave curving up and down). - Add evenly spaced divider lines (dark vertical lines) along the floor's length, scrolling them left at high speed based on velocity to create a sense of rushing motion. - From the floor's bottom edge, rainbow-colored light particles spill backward, indicating the floor is floating in space. - Occasionally add jump ramps (upward curves) or gaps (breaks) in the floor to create moments for jumps. Obstacles - Meteors: Three sizes—large, medium, small. Drawn as dot-art rocks (outline + two levels of shading + lava-color cracks), flying in diagonally from the top-right of the screen. They trail flames that shift from lava color to dark behind them. Dodged meteors pass off-screen without hitting the floor or shatter into debris behind the character. - Beams: Before appearing, show a warning as a 1px blinking line (magenta) for about 0.5 seconds, then fire a 3–5px thick beam with a white core + cyan outer edge horizontally or diagonally. During firing, the ends jitter slightly. - Obstacles are not random but follow pre-defined "attack patterns" in sequence, designed to loop after a set time (e.g., single meteor → triple meteor → low beam → high beam → beam + meteor combo → large meteor + floor gap). Dodge Actions - Jump: Squash to wind up → stretch to leap → curl up in mid-air → land with squash + rainbow sparks (not dust). - Double Jump: Pause motionless in air for an instant, then re-accelerate. A 1px rainbow ring expands around the character. - Sliding: Squash height to nearly half for a low glide, sparking from the contact point with the floor. - Dash Dodge: Briefly boost speed greatly, leaving 3–4 afterimages behind. Afterimages cycle through the 7 rainbow colors sequentially, fading stepwise to palette darks. - Assign each attack pattern the dodge action that looks coolest for it. Perform dodges at the last possible moment (near-miss). State Machine - Cycle per attack pattern: RUN (normal sprint) → WARN (show warning, character briefly shifts eyes 1px to look ahead) → DODGE (dodge action) → NEAR_MISS (effect) → back to RUN. - At the loop's end, add BOOST (full acceleration) → WARP (screen flashes white → rainbow for an instant), transitioning naturally back to the opening RUN. - Apply easing to pose and camera parameters between keyframes. Camera Work - Treat the camera as integer offsets on logical coordinates. No zoom or rotation; express only through position shifts and shakes. - Follow: Dampen and lag behind the character's vertical movement, rising slightly delayed during jumps. - Lead: As speed increases, advance the camera a few px ahead in the direction of travel, pushing the character toward screen-left to emphasize acceleration. - Hit Stop: At near-miss instants, freeze everything for 3–4 frames, then slow-motion for ~0.3 seconds (by skipping update steps) before resuming normal speed. - Shake: 1–2px screen shake on large meteor passes or beam firing starts. Pull shakes from a fixed pattern array, no randomness. - During BOOST, lower the camera slightly to increase the floor's screen area and heighten speed sensation. Motion Effects for Speed - Multi-layer Parallax: Distant stars (nearly static 1px dots), midground stars (stretch horizontally into 2–6px lines based on speed), foreground speed lines (bright horizontal lines whipping across the screen at high speed) in three layers. - Scale the number and length of speed lines proportional to velocity, maxing out during BOOST. - Place 1–2 large dot-art planets or nebulae in the background, scrolling them very slowly to convey scale. - During near-misses, outline the character's silhouette with 1px white, and briefly glow only the side closest to the meteor/beam. - Sparks from landings/slides/dashes, meteor tails, debris, and light particles spilling from the floor are all handled by the same particle system. Particle System - Pool-based particle system with no allocations: Pre-allocate and reuse. - Each particle type has a color transition table (sequence of palette indices) and fades stepwise through colors based on lifespan before vanishing (e.g., sparks: white → yellow → orange → dark; afterimages: rainbow → dark). - Snap particle positions to the grid when drawing. - Update at fixed 60Hz timestep, render with rAF. Zero object creation inside the loop (including arrays, closures, string concatenation). Scene - Background is deep space: Gradual bands from black to navy (express color boundaries with dithering), twinkling stars, distant planets. - Ensure clear brightness contrast so character/obstacle/floor colors don't blend into the background. Even in a busy screen, the character's silhouette must be instantly readable. Quality Standards - Crisp pixels at any window size, seamless uninterrupted loops, stable 60fps, readable silhouettes. - Not like scaled-down vector art, but like a polished demo screen from a 16-bit era action game. - Convey "fast," "dodged by a hair," and "cool" in every single dodge.
Verified: this exact prompt appears in the creator's post or reply on X.