Skip to content
StyleIn productionGrowing set

Editorial

Magazine and poster conventions: display type, rules, mono captions.

Editorial in the library

Pro

Pick 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.

bookingformslocal-business
Pro

A 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.

pricingmenulocal-business
Pro

A 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.

mapcontactlocal-business
Pro

A 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.

revealsvgphotography
Pro

A 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.

badgectasvg

A felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.

texthighlightscroll

Opening 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.

opening-hourslocal-businesstypography

The 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.

herotabslocal-business
Pro

A 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.

herobefore-afterpointer
Pro

A 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.

timetableschedulegym
Pro

Pick 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.

formsecommercelocal-business
Pro

One 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.

ecommerceproduct-cardcolour
Pro

The 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.

footerscrollsticky
Trending
Pro

A 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.

3dscrollstorytelling
Trending
Pro

Marbled Endpaper

backgrounds

Paper 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.

backgroundcanvasgenerative
Pro

The 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.

sectioncontactform
Pro

Live Hours Nav

components

A 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.

navigationheaderopening-hours
Pro

A 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.

navigationmenuoverlay
Pro

A 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.

navigationscrollsticky
Pro

Type 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.

svg-filterlightingletterpress
Trending
Pro

A 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.

slideshow3dtransition
Trending
Pro

A 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.

revealsvg-maskcanvas
Pro

A headline that inverts the photograph beneath it, with a scrim that keeps it legible.

knockoutinvertblend-mode
Pro

A magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.

herotypeblend
Pro

A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.

heroduotonesvg-filter
Pro

An editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.

indexstickyeditorial
Pro

A pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.

typographyquoteeditorial
Pro

Two photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.

imagemaskprint
Pro

A scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.

cssbluroverlay
Pro

Hot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.

textgradientpointer
Pro

A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.

galleryhoverlist
Pro

A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.

studioportfoliophotography
Pro

A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.

heropostereditorial
Pro

A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.

herogalleryevent