17 · Plan Room: a timber framer's site built as a drawing set

Oakum & Daughters is a fictional family shop in Wick Hollow that cuts mortise-and-tenon barns by hand. The whole site is a set of blueprint sheets, and every drawing on it is generated live from one set of frame numbers. What makes people stop: a barn frame draws itself in the hero, then you can scroll it up bent by bent on "raising day", and later change the width, length and roof pitch yourself and watch the plan, elevation, 3D view, timber list and price all change together.

Inspiration

This batch was built from the kit and the lab pages of 20 Oct 2026, not from the Magic UI or Aceternity component list. The ideas come from Lab 04 (Kitbitz drawings and Text Effects lettering as framing for a contractor-style site), Lab 01 (Paper Shaders as a living surface) and Lab 02 (GSAP DrawSVG and ScrollTrigger). The drawing-set idea is the addition: sheet numbers (A-101, R, J, W, C-1, V), a sheet border with zone markers, a title block that fills in, a crosshair that reads out feet and inches like a drafting machine, and a ballpark price shown as a line-by-line formula. The 3D engine is hand-written for this site (about 65 lines): timbers are boxes, drawn as SVG polygons, back faces culled, sorted back to front.

Visual direction

• Palette: blueprint #0e2a4a (deeper #0a2140), line #e8f1ff, safety orange #ff7a1a for pegs, callouts and the one active thing, kraft #c9a77c with brown ink #2b1d10 for the visit section. Timber faces are four blues (#4a86c4 end grain, #2f6aa8 lit, #1f4f84, #153a63 shade) so a frame reads as a cyanotype.
• Fonts: Barlow Condensed for headings, labels and the title block; Courier Prime for body text, like typed notes on a drawing.
• Motion: GSAP, nothing bouncy except the stamps. The hero frame draws phase by phase (sills, bents, plates, rafters, ridge), then fills; dimension lines draw; five orange callouts thump in like rubber stamps. Raising day is pinned for 420 percent of the viewport and scrubbed.
• Layout: hero with the drawing on the right and a title block bottom right; a pinned raising sheet with a step list, a scrub slider and a ticking title block (time, pegs driven); three exploded joints; four work cards; the calculator; and a kraft "work order" form.
• Signature moments: the hero draw-in and callouts; four bents rotating up from flat, then plates, joists, rafters and ridge dropping in, ending with an evergreen bough and a "Topped out" stamp; joints that lock together on hover or tap; the drag-to-turn 3D tab; the one-page printable spec sheet.

Theme, kit and licenses

Theme: Blueprint / Workshop from _kit\THEMES.md. A framer sells drawings and joinery, so drawings are the product and the theme's suits-list names contractors and makers. Budget Medium, with the hero carrying two moments. One change from the recipe: the visit section switches to kraft paper so the form reads like a work order.

Kit parts used: paper.js (Paper Texture shader as folded blueprint stock behind the hero and calculator, kraft behind the visit section), kitbitz.js (ladder recolored to blueprint blue in the joinery margin; firewood, chopping block, rope and chestnut tree in natural color on the kraft), textfx.js (stamp and blueprint lettering, scoped), fps-chip.js (shown with ?fps). No tools outside the kit.

References

• Kitbitz, https://kitbitz.art: hand-drawn framing art, used as accents only.
• Text Effects by Colorion, https://text-effects.colorion.co: the rubber-stamp and blueprint lettering.
• Paper Shaders, https://shaders.paper.design: the paper texture surface.
• GSAP, https://gsap.com: DrawSVG line draw-ins, ScrollTrigger pin and scrub, SplitText headline.
• Google Fonts, https://fonts.google.com: Barlow Condensed and Courier Prime.

Why these choices

A timber framer's customer wants to see that the shop understands structure and can put a number on it. Drawings do both, so the theme and the product are the same thing. The calculator is the part with real business value: it gives a ballpark (timber board feet times a species rate, shop hours times $68, a raising-day fee, and a fixed drawings fee, shown as a range of 10 percent under to 15 percent over) and ends in a site-visit request, so the effects lead somewhere.

Trade-offs the code shows. The animated paper shader runs on only three surfaces and loads lazily, with a flat colour fallback if it fails. The pinned scroll only runs when motion is allowed; with reduced motion the scrub slider and step list do the same job. On phones the callout text shortens and a legend list appears, the step list shows one step at a time, and the calculator opens on the 3D tab. The hover crosshair is turned off on touch. The painter's-algorithm engine is cheap and good enough for boxes, but it could not handle crossing, non-convex shapes. The kit also did its job here: the builder noted the stamp effect loops and fades by design, so one-shot stamps are driven by GSAP instead.

Who this kind of site is for

It wins for contractors, framers, cabinet and stair makers, architects and anyone whose craft is drawings plus a price: the visitor sees skill, then tests it. It is the wrong call for a business with no drawable product (a bakery, a salon) or where visitors want a phone number in two seconds; the pinned scroll section would get in their way. For a real client, the pricing numbers would need the shop's rates, and the drawing engine would need that client's actual product geometry, which is the real work of reuse.

How to make it

Stack and key techniques

• One HTML file, about 1,260 lines hand-written plus inlined kit parts; GSAP with ScrollTrigger, DrawSVG, SplitText; Paper Shaders; Kitbitz; Text Effects.
• A small 3D engine drawing timbers as SVG (about 65 lines) and one frame generator (about 85 lines) feeding the hero, raising day, work cards, calculator, timber list and print sheet.
• Callouts positioned from 3D points through the SVG's screen matrix.
• Download as SVG and a print stylesheet for a one-page kraft spec sheet. The email is a mailto: link built from the form.

The prompt

Build a single-file website, no build step, for Oakum & Daughters, a fictional family timber-frame shop in Wick Hollow that cuts mortise-and-tenon barns by hand. The whole site is a drawing set: one sheet per section, labeled A-101 (hero), R (raising day), J (joinery), W (recent work), C-1 (price a frame), V (site visit).

Look: blueprint blue #0e2a4a with a faint 120px/24px grid, line colour #e8f1ff, safety orange #ff7a1a for accents. The visit section is kraft #c9a77c with brown ink #2b1d10 so the form reads as a work order. Fonts: Barlow Condensed (uppercase headings) and Courier Prime (body). Use Paper Shaders' Paper Texture as folded blueprint stock behind the hero and calculator and as kraft behind the visit section. Use GSAP 3.15 (ScrollTrigger, DrawSVG, SplitText). Use Kitbitz (CC0) drawings only as accents: a ladder in the joinery margin, firewood, a chopping block, rope and a chestnut tree on the kraft.

Write a tiny axonometric engine in SVG: timbers as boxes, back faces culled, sorted back to front, four blue face shades. Write ONE function that turns width, length, number of bents, roof pitch and loft into every timber (sills, posts, tie beams, plates, girts, knee braces, principal and common rafters, collar ties, ridge, loft joists). Use it everywhere.

Moments: (1) The hero frame draws itself phase by phase, then fills, dimension lines draw, then five orange joinery callouts stamp in (positioned from 3D points). Add a sheet border with zone markers, a title block, and a crosshair that shows X/Y in feet and inches. (2) Raising day: a pinned section scrubbed by scroll, four bents rotate up from flat, then plates, joists, rafters and ridge drop in; the title block ticks time and pegs driven; a "Topped out" stamp and an evergreen bough finish it; include a scrub slider and a clickable 8-step list. (3) Three exploded joints (mortise and tenon, bladed scarf, dovetail tying joint) that lock together on hover or tap and turn slightly with the pointer. (4) Four recent-work cards drawn from their own numbers, each with a "Price one like this" button that loads it into the calculator. (5) Calculator: sliders for width and length, buttons for bents, pitch, loft and timber species; Sheet/Plan/Elevation/3D tabs on one drawing sheet, the 3D view turns when dragged; a timber list with board feet, joint, peg and shop-hour totals; the price as a visible formula and a range; warn when bays are over 16 ft or under 8 ft; download the drawing as SVG; print a one-page spec sheet. (6) A site-visit form with validation that composes a mailto email including the frame study.

Constraints: no em dashes in copy; real focus styles; prefers-reduced-motion keeps finished states and replaces the pin with the slider; no horizontal overflow at 1440 and 390 wide; phone layout shortens callouts, shows one raising step at a time and opens the calculator on the 3D tab; paper shaders load lazily with a flat fallback; add ?fps for a frame-rate chip.

Verify: screenshot every section at desktop and phone, at several scroll stops in raising day, check the console for errors, try every control, print to PDF, fix, repeat.

Build notes

• Headless software rendering finishes the hero animation too slowly, so the final shots come from the reduced-motion pass.
• Real-device fps, Safari, Firefox and printing from a real browser dialog were not verified.
• Kit Kitbitz credit helper printed raw file names with CDN paths, so the credit line is hand-written.
• Stamps were reworked to GSAP one-shots because the textfx stamp loops by design.
• Painter's-algorithm sorting works because every solid is a box or prism; a decal mechanism draws mortise mouths right after their parent timber.
• The "put my frame study in the email" box writes the study into the email text; there is no file attachment.

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these models on one-shot frontend work, and the kit points rest on extrapolation from model tiers.

Overall estimate (judgment call): Sonnet 5.5 with the kit roughly 65 to 80 percent of the visual impact in one pass; from a blank page roughly 40 to 55 percent. The kit mostly protects the surface (paper, art, lettering). The geometry and the raising choreography are hand-written, so those parts depend on the model. A screenshot feedback loop and building in stages (engine, then hero, then raising, then calculator) would close much of the gap.