01 · CT Airlink Night Run: a real livery site, rebuilt as one pre-dawn drive

This is a concept redesign of ctairlink.com, a Connecticut airport car and limo service. The whole page is a single drive to the airport, 04:40 to 06:10, with a live night-highway shader behind every section that breaks into dawn at the footer. The thing that makes people stop is the opening: a rain-wet road, headlights and taillights, then a departures board that clatters into place and a trip planner that draws a glowing route on a map.

Inspiration

Aceternity UI: Text Flipping Board became the split-flap departures board (twelve rows, click a row and the planner picks it up). Tracing Beam became the "How a ride works" timeline, where a gold line draws down the rail as you scroll. 3D Card and Glare Card became the three fleet cards, with tilt and a light spot that follows the pointer. World Map (arcs between points) became the route arc in the planner.
Magic UI: Animated Beam and Dotted Map became the planner map, with a drawn beam and a bright pulse that runs along it. Marquee became the three-row wall of Connecticut town names.
Cult UI and the gradient tools: the idea of a shader as the hero, plus film grain. Here the shader is a full procedural scene, not a gradient.
Added on top: the road scene persists dimmed behind every section; a drive clock in the right gutter runs 04:40 to 06:10 with road names as you scroll; scrolling briefly speeds the car up; the map camera zooms to each route.

Visual direction

Palette: ink #04070f, heritage navy #001d50, headlight amber #f4b64a, heritage gold #c79113, cream #f2ead9, signal red #ed1c24 (dots and taillights only). Navy, gold and red come from the existing brand.
Fonts: Instrument Serif for display, Hanken Grotesk for body, IBM Plex Mono for data and labels.
Motion: slow and weighty. Masked headline lines rise from below, sections blur in, board cells flip, the beam draws then runs. Reduced-motion switches most of it off.
Layout: a big sky with the headline above the horizon, then glass cards over the dimmed road. A mobile bar with Call and Quote buttons appears after the hero.
Signature moments: the hero road; the board; the planner ticket with route, miles, drive time, suggested pickup and vehicle; sheen sweeping over hand-drawn SVG cars; four large policy numbers (6, 15, 150, 3 to 5); the footer sunrise.

References

Aceternity UI, https://ui.aceternity.com: Text Flipping Board, Tracing Beam, 3D Card, Glare Card, World Map.
Magic UI, https://magicui.design: Animated Beam, Dotted Map, Marquee.
Cult UI, https://www.cult-ui.com: shader as hero, film grain.
Shader Gradient, https://www.shadergradient.co, and the other gradient tools: the general "the background is a live shader" idea, pushed further into a procedural scene.
ctairlink.com, https://ctairlink.com: the real business being redesigned, and the only source of facts on the page (phone, email, 5% online discount, airports, states, vehicle capacities, service promises, cancellation and card-hold policies, the booking engine at book.mylimobiz.com/v4/CTairlink).

Why these choices

The current site lists no rates, no fleet photos, no reviews, no years in business, no licence numbers and no hours.

That absence shaped the whole design, because this is a real company and the page must not lie for it. The brief was to use only audited facts and invent nothing: no prices, no reviews, no years, no licences, no vehicle makes. So the page sells with mood and one useful tool. The planner gives approximate miles, a drive-time range, a suggested pickup time and the vehicle that fits, labelled as approximate, then hands off to the real booking engine. The fleet is drawn as generic silhouettes with real capacities, not photos of cars the company may not own. The policies become four big numbers because those are what customers actually ask about.

Trade-offs: the shader is costly. The page starts at 0.72 render scale, drops resolution when frames run long, renders at half rate and lower resolution when content veils the road, pauses when the tab is hidden, and falls back to a CSS gradient without WebGL. Everything keyboard-reachable is a real button or link, and the town picker is an accessible combobox.

Who this kind of site is for

It suits livery and black-car operators, charter and aviation services, boutique hotels, and any local premium service that sells calm and punctuality and has no good photography. It would be the wrong call for a business whose buyers want a price list first, for older phones and weak GPUs as the main audience, or for anyone who needs a page that loads instantly on a poor connection.

To livery operators directly: your customers are not browsing, they are anxious about a flight at 6 AM. This page answers that in the first screen and then lets them check their own trip before they call. If you have no photos or reviews yet, you can still look like the most careful company in the county, and you do not have to make anything up.

How to make it

Stack and key techniques

One HTML file, 1,346 lines, no build step. No libraries; only Google Fonts load.
Road shader: about 260 lines of raw WebGL2 GLSL. Perspective road with anti-aliased lane dashes, barrier and guardrail with reflectors, street lamps with light pools, oncoming headlights and taillights with flares and wet-road reflections, a procedural skyline, clouds, stars, rain, a hood reflection and a dawn blend.
Render control, about 75 lines: adaptive render scale, half rate when veiled, pause when hidden, CSS fallback, context-loss handling.
Split-flap board, about 75 lines, time based so it settles on schedule at low frame rates.
Planner, about 175 lines: hand-authored coast, borders and rivers as SVG paths, 80 towns, 12 destinations, great-circle distance with a distance-dependent road factor, animated viewBox camera, capacity rules.
Three hand-drawn SVG vehicles; scroll-driven clock, veil, dawn and timeline.

The prompt

Build a single-file concept redesign (index.html, no build step, no libraries except Google Fonts) of ctairlink.com, a real Connecticut airport car service. Mark it in the footer: "Concept redesign. Facts taken from ctairlink.com." Use ONLY these facts and invent nothing (no prices, reviews, years in business, licences, vehicle makes):
Phone 1-203-706-9996, info@ctairlink.com, booking at https://book.mylimobiz.com/v4/CTairlink (new tab), 5% off online reservations. Airports: JFK, LaGuardia, Newark, Bradley, Westchester (HPN), Boston Logan, Tweed New Haven. Also Manhattan, Brooklyn, Queens and two cruise terminals (NYC, Bayonne). States: NY, NJ, CT, MA, PA. Vehicles: Sedan/Luxury Sedan 3 passengers 3 bags, Mini SUV 4 and 4, SUV 6 and 6. Promises: support watches flight timing and tells the driver, driver arrives early and helps with luggage, GPS-tracked fleet, a customer care call after you book online. Policies: 6 hours notice to cancel or change, 15 minute no-show rule, 150% preliminary card hold released in 3 to 5 business days.

Concept "Night Run": the page is one pre-dawn drive to the airport. Palette: ink #04070f, navy #001d50, amber #f4b64a, gold #c79113, cream #f2ead9, red #ed1c24 for dots and taillights only. Fonts: Instrument Serif (display), Hanken Grotesk (body), IBM Plex Mono (data). Motion is slow and weighty.

Signature moments:
1. Fixed WebGL2 fragment-shader night highway behind everything: perspective road, anti-aliased lane dashes, barrier and guardrail with reflectors, street lamps with light pools, oncoming headlights and taillights with flares and wet-road reflections, skyline, clouds, stars, rain, hood reflection. It dims behind content and blends to dawn at the footer. Scrolling briefly speeds the car up.
2. Hero: "Your flight is early. Your driver is earlier." with masked line rise.
3. Split-flap departures board of 12 destinations, time-based so it settles on schedule; clicking a row sets the planner.
4. Trip planner: accessible combobox of about 80 real Connecticut towns, destination chips, direction toggle, passengers and bags steppers, flight time and 2 or 3 hour airport buffer. Hand-authored SVG map (coast, borders, rivers, dotted land) with an animated viewBox camera, a glowing route beam that draws then runs. Show approximate miles (great-circle with a road factor), a drive-time range and a suggested pickup time (handle crossing midnight). Pick the vehicle from the real capacity rules; above 6 say "Call us". Label all numbers approximate, then link to the booking URL.
5. Fleet: three hand-drawn SVG vehicles with sheen sweep, headlight cones, pointer tilt and glare.
6. Tracing-beam timeline of the ride, four big policy numbers, a marquee wall of town names.
7. Right-gutter drive clock running 04:40 to 06:10 with road names; mobile bottom bar with Call and Book.

Put name, phone, email and booking URL in one CONFIG object at the top of the script.

Constraints: adaptive render scale (start about 0.72, step down if frames run long), half rate and lower resolution when veiled, pause on hidden tab, CSS gradient fallback without WebGL, prefers-reduced-motion support, no horizontal overflow at 390px, no console errors.

Verify: screenshot desktop (1440) at 9 scroll stops and mobile (390) at 10 stops, read each, fix problems, repeat. Script the planner: change town and destination, toggle direction, 7 passengers, filter the combobox, a no-match search, a 3-hour buffer across midnight, cruise mode, a board row click. Check every booking and phone link.

Build notes

No-WebGL and reduced-motion fallbacks were both run clean; zero console errors and no horizontal overflow at 1440 and 390.
Speed is not confirmed. On an integrated Radeon the shader took about 22 to 29 ms per frame at 1224x765 (measured while other builds loaded the machine), so expect a softer road on weak GPUs.
Hover tilt and glare on the fleet cards were never triggered in testing, and animation was judged from stills.
Route arcs are straight-line links, not roads; miles and times are approximate and labelled so.
Cancel-window copy and card-hold details were handled carefully. Three ride bullets ("trained, experienced drivers", "regular maintenance checks", "trips planned around your schedule") and the charter, proms and parties line also trace back to wording on ctairlink.com's home and airport pages, per the full site audit done before the build.
The town list was checked after the build against ctairlink.com: all 80 towns in the planner are named on the real site (77 have their own location pages, and Berlin, Norwalk and Southbury appear in the home page copy).

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the rows below are extrapolated from the spec table, Anthropic's own pages and earlier-generation reviews.

Feature	Opus 5.5 (likely outcome)	Sonnet 5.5 (likely outcome)
Road shader (lamps, wet reflections, skyline, dawn)	Attempts it, likely with small errors such as banding, hard cutoffs on glow or a road that stretches at the horizon	Likely simplifies to a gradient road with a few dashes and glow dots, losing the rain, reflections and skyline
Render control (adaptive scale, veil half-rate, fallback)	Does fine	Likely adds a resize handler and fallback but may skip adaptive scaling or the hidden-tab pause
Split-flap board	Does fine, possibly with fixed-frame timing that drags on slow machines	Attempts it, likely with a plain character shuffle and no mobile column layout
Planner map with camera and beam	Attempts it, likely with a rough coastline or markers that scale wrongly on zoom	Likely simplifies to a static map or a fixed-box diagram with a line between points
Planner logic (midnight, capacity, combobox)	Does fine	Attempts it, likely with bugs at midnight crossing or missing keyboard support
Fleet cards (SVG cars, tilt, glare)	Does fine, cars may look more generic	Likely uses simpler shapes and basic hover lift, less glare
Honesty constraint (no invented facts)	Does fine	Does fine if the prompt is explicit, though more likely to let a small filler claim slip in
Scroll choreography (clock, veil, dawn, beam)	Does fine	Likely keeps the timeline and loses the dimming-to-dawn blend

Rough overall judgment, a call and not a measurement: Opus 5.5 likely keeps roughly 80 to 90 percent of the visual impact in one pass, with the gap mostly in the shader. Sonnet 5.5 likely keeps roughly 55 to 70 percent, mainly because the shader and map camera are the likeliest to be simplified. Opus 5.5 would likely match Fable 5.1 on the planner and cards. A screenshot feedback loop, building the shader as its own step, and a second pass dedicated to the planner would close most of the gap for either.