Editorial
Magazine and poster conventions: display type, rules, mono captions.
Editorial in the library
Booking Slot Picker
componentsPick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
Service Price Ledger
sectionsA price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Find Us Map Section
sectionsA street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.
Aperture Iris Reveal
animationsA photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.
Rotating Seal Badge
componentsA round seal — the phrase fitted exactly around the circle with drawn dot separators — that turns once every 24 seconds, eases to a stop on hover, and is the link.
Marker Highlight Text
text effectsA felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.
Hours Poster Section
sectionsOpening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.
Headline Switch Hero
heroesThe second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.
Seam Reveal Hero
heroesA before-and-after hero with no handle: the seam is wherever your pointer is, eased like a curtain, and the colour arrives with the work.
Class Timetable Section
sectionsA week of classes set like a departure board — placed by real start time and length, one accent stripe behind today, filters that dim rather than delete, and a day rail on phones.
Gift Voucher Composer
componentsPick an amount, write a line, and the voucher is on the table as you type — a perforated bond-paper ticket with the amount cropped by its own edge and a serial that never changes under you.
Colourway Product Card
componentsOne photograph, every colourway: the shot is greyscaled and multiplied into the chosen colour, so a small label with six colours and one product photo gets six product photos.
Curtain Footer Section
sectionsThe page ends, lifts, and the footer is already there underneath: a sticky footer revealed by the last section sliding over it, with the wordmark cropped by the bottom edge. No JavaScript in the reveal.
Lathe Story Scroll
animationsA five-chapter scroll story that turns a single drawn line into a three-dimensional object: revolved, glazed, exploded into named parts and reassembled, with no three.js.
Marbled Endpaper
backgroundsPaper marbling computed live on a canvas: two inks on unbleached paper, combed slowly into veins, with the pointer as the stylus and one accent drop the reader places by clicking.
Final Call Section
sectionsThe closing spread of a trade site: an oversized two-tier ask cropped by the edge, a two-field enquiry line with one filled button, and a ledger of the four things customers ring to check.
Live Hours Nav
componentsA small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Index Overlay Menu
componentsA full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
Chapter Progress Nav
componentsA sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.
Letterpress Light Type
text effectsType debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
Venetian Blind Slideshow
animationsA hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
Ink Bleed Reveal
animationsA photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
Knockout Type Plate
text effectsA headline that inverts the photograph beneath it, with a scrim that keeps it legible.
Type Specimen Hero
heroesA magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.
Duotone Plate Hero
heroesA real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.
Sticky Index Section
sectionsAn editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Hanging Quote Section
sectionsA pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
Lenticular Print Shift
backgroundsTwo photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.
Variable Blur Scrim
patternsA scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.
Iridescent Foil Sweep
text effectsHot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
Hover Reveal Text Gallery
patternsA list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
Seventeen — Creative Studio
site templatesA print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
Edge Sliver Poster Hero
heroesA saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.