make-of · starlite drive-in

A 1950s night at the movies with zero image files

Every star, tail fin, neon tube, and kernel of popcorn on the Starlite page is CSS or hand-written SVG. The whole illustration ships as markup — it scales to any screen, weighs almost nothing, and never waits on a network request.

What it demonstrates

That "illustrated" does not have to mean "image-heavy." A complete scene — a glowing movie screen, three rows of parked cars, an animated intermission parade — plus three period movie posters are all drawn with gradients, border-radius, and SVG paths. The page is one HTML file and it is honest about its fiction: the theatre, the films, and the 1958 prices are all labeled imaginary.

The techniques, honestly named

• Neon script sign — the Yellowtail script font with three stacked pink text-shadow layers; one letter flickers on a stepped keyframe, like a tube about to give out.
• Chasing marquee bulbs — a repeating radial-gradient strip whose background-position is stepped sideways, so the bulbs appear to chase each other.
• Starfield — ~110 tiny absolutely-positioned spans generated by a few lines of JavaScript; about half twinkle on a staggered opacity keyframe.
• The drive-in scene — one hand-written SVG. A rear-view 1950s car (tail fins and all) is defined once in <defs> and stamped eleven times with <use> at different scales for three rows of depth.
• Intermission parade — the dancing popcorn, hot dog, and soda from the classic snipe reels, drawn in SVG and marched across the screen with a 30-second translate loop inside a clipPath, each one bobbing on its own offset keyframe.
• Reduced motion — the flicker, bulb chase, twinkle, and parade all stop; the parade is parked mid-screen so the scene still reads.
• Posters — three fictional one-sheets as small standalone SVGs, each with its own palette pulled from period poster printing.

Recreate it

The full recreation prompt — the complete art direction, section map, SVG scene recipe, and the quality bar — is in the showroom vault.

Prompt — $5, on the dashboard