10 · Hollow Hill Orchard: a cut-paper pop-up farm that runs through a whole day as you scroll

Hollow Hill is a fictional family orchard, cider mill and farm bakery in made-up Marrow Brook, CT. It is built as a paper pop-up book: a fixed diorama of hand-cut hills sits behind paper "spreads" that fold flat as they scroll in. What makes people stop is the light. Sunrise at the top becomes noon, golden hour, dusk and a night with fireflies and lit farmhouse windows by the footer, and the useful parts (a harvest wheel, an open/closed sign, a pick-your-own planner) are all real.

Inspiration

Visual direction

References

The WebGL gradient tools (NEAT, InstantGradient, Shader Gradient, whatamesh) do not appear. The builder notes say no WebGL, and the code agrees.

Why these choices

Farms and bakeries sell warmth and the calendar, so the site shows the calendar. The day cycle gives every scroll stop its own light without needing different art. One time-of-day table feeds 14 properties, emitted as CSS scroll-timeline keyframes where the browser supports it and driven from JavaScript otherwise.

The trade-offs are visible in the code. The paper filter was too heavy to run live, so each textured layer is baked once into a canvas and re-baked on resize or season change. The cost is that scene shadows are frozen and pop-up illustrations have no grain. The scenery is aria-hidden, so apple picking is pointer-only. Reduced motion stops drift, spin and the title drop. Fonts come from Google Fonts, so a flaky connection changes the look.

Who this kind of site is for

This is the template for local places whose pitch is warmth and season: farms, orchards, farm stands, bakeries, inns and B&Bs, garden centres, farmers' markets, breweries, cideries, Christmas tree farms. It works when the owner has a real story, real hours that change by season, and events people want in their calendar. Most visitors there are on a phone, deciding whether to drive over. The pieces that earn their keep are the open/closed sign, hours that know the date, "what is ripe today", the planner and the .ics downloads. A competitor with a static Facebook page cannot match them.

It is the wrong call for anywhere that needs speed and clarity over charm: restaurants with online ordering, clinics, trades, law or financial offices, or any client who wants to edit prices weekly without a developer. Things to check before reusing it:

How to make it

Stack and key techniques

The prompt

Build a single-file website (index.html, no build step, no libraries except Google Fonts, no WebGL) for a FICTIONAL family farm: "Hollow Hill Orchard, Cider Mill and Farm Bakery" in made-up Marrow Brook, Connecticut. The footer must say plainly that it is a made-up business and a design demo. The site is a template for local small-business sites (farms, bakeries, inns), so it must be useful, not just pretty.

Concept: a cut-paper pop-up book. A fixed diorama sits behind the page; content sections are deckled paper sheets that lie down from a 26 degree tilt as they scroll into view, with pop-up illustrations that fold up from the sheet's top edge.

Visual system: cream #f6ecd6, barn red #b3342b, apple green #7fae42, goldenrod #e2a52c, deep spruce #1f4a3d, dusk plum #5b3a5e, kraft #c8a573. Fraunces (soft, wonky, 900) for headlines, Cabin for text, Caveat for hand labels, Cabin Sketch for a chalkboard. Letterpress buttons with hard drop shadows that collapse on press. One small token set used everywhere.

Diorama: build the landscape procedurally in SVG from a seeded RNG: 8 parallax layers (far ridge, patchwork fields with hay bales and orchard rows, farm hill with house, red barn with silo, cider mill with a spinning water wheel and flume, near trees, apple layer, front grass). Add an SVG paper filter (fibre noise, lighting, hand-cut edge displacement). Bake each textured layer once into a canvas (re-bake on resize and season change) because live filters wreck frame rate. Four seasons switchable from the nav and defaulting to the visitor's date, all driven by CSS variables, with canvas leaves, petals, snow.

Day cycle: scroll position is time of day, sunrise at the top to night at the footer. One table of keyframes (sky bands, sun and moon arcs, wash and veil tint, stars, window lights, cloud brightness, sheet shadow direction) drives CSS scroll-timeline animations, with a JavaScript fallback for browsers without animation-timeline. At night: stars, lit windows, fireflies.

Real features: (1) a harvest wheel (SVG, text on arcs) showing 18 crops across the year, reading today's date, with a draggable needle, a range slider and a "ripe on this date" list; (2) an open/closed sign that flips in 3D from the visitor's clock and seasonal hours; (3) a pick-your-own planner (pickers, bag size, bags) giving apples, pounds, minutes, cost and advice; (4) a chalkboard bakery menu with a special for each weekday; (5) event tickets computed from date rules (second Saturday of May etc.) with working .ics downloads; (6) a hand-drawn folded paper map whose dashed route draws itself, auto-panning on phones; (7) pickable apples that drop with bounce, count in a basket, and regrow.

Constraints: semantic HTML, keyboard-usable controls, prefers-reduced-motion respected, no horizontal overflow at 390px or 1440px, no console errors, pause animation when the tab is hidden. Include a ?nocsstl=1 switch to test the fallback.

Verification loop: open the page in a real browser. Screenshot desktop at 7 or more scroll stops and phone at 10, in all four seasons, with reduced motion on, and with the fallback forced. Check the console, measure frame rate while scrolling, click through every interaction (apple, season, wheel, planner, .ics, menu), fix problems, repeat until clean. Report anything untested.

Build notes

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 table rests on tier positioning and extrapolation from earlier-generation reviews.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Procedural SVG landscape, 8 layers, 4 seasons via CSS variables Does fine, probably slightly fewer small props Attempts it, likely with a plainer scene (fewer props, flatter layers) and some seasons that miss elements
Paper filter baked to canvases Likely attempts a live filter, hits jank unless it measures; if it bakes, a likely bug is lost season colours Likely simplifies it away or leaves it live, so scrolling is slow on weak GPUs
Day cycle: one table feeding CSS scroll timelines plus JS fallback Attempts both paths, likely bug: the fallback drifts from the CSS path Likely simplifies to one JS scroll handler on a few elements, with fewer tracks (no moon arc, no sheet shadow shift)
Harvest wheel with text on arcs and drag Does fine, small risk of mirrored text on the lower half Attempts it, likely bug: upside-down arc labels or wrong date-to-angle mapping
Hours logic and 3D flip sign Does fine Does fine, likely missing an edge case such as the Dec 25 closure or next-open-day lookup
Planner and .ics generation Does fine Does fine, likely bug: unescaped commas or missing CRLF in the .ics
Fold-up pop-ups and deckled sheets Does fine Likely simplifies to tilted rectangles with rounded corners and no torn edge
Self-drawing map plus apple picking physics Does fine Attempts it, likely bug: route mask misaligned or apples that never regrow

Rough overall estimate, a judgment call and not a measurement: Opus 5.5 keeps roughly 80 to 90 percent of the visual impact in one pass, and likely matches Fable 5.1 on the functional parts. The gap is mostly in perf work and rarely tested paths. Sonnet 5.5 keeps roughly 60 to 75 percent, likely a handsome but flatter site that works but feels less alive. A screenshot-and-frame-rate feedback loop, plus splitting the build into scene, day cycle and tools, would close much of the gap for either model, and for Sonnet 5.5 it matters most.

← Previous reportNext report →