Blocks

Snippets to copy and guides to read.

For designers
Balance headings and paragraphs with text-wrap
Two lines of CSS that even out ragged headings and stop paragraphs ending on a single word.
Tags: typography, css
Snippet
Block image reveal
A solid panel sweeps across an image on scroll and reveals it behind the panel.
- HTML
- Astro
- React
- gsap
- react
Tags: motion, image, scroll
For designers
Components that respond to their own space
Container queries let a component change its layout by the space it's given, not by the size of the screen, so it works anywhere it's placed.
Tags: layout, css, responsive, units
Guide
CSS that hides content
Where a snippet's CSS has to load when it hides or dims content, and how to make sure the content comes back if the script never runs.
- HTML
- Astro
- React
Tags: css, performance, motion
For designers
Design for short screens with vertical breakpoints
Breakpoints usually follow the width of the screen, but laptops are often short. A height query lets a page change its layout when there isn't room above the fold.
Tags: layout, css, responsive, breakpoints
For designers
Fluid type with clamp()
Text that grows smoothly with the screen, between a smallest and a largest size, written as one clamp() value.
Tags: typography, css, units, responsive
For designers
Full-height sections on phones, with svh, lvh and dvh
On a phone the browser's address bar comes and goes, so "the height of the screen" has two answers. The viewport units let you choose which one a design uses.
Tags: layout, css, units, responsive, mobile
For designers
Grids that fit their space without breakpoints
One line of CSS that fits as many columns as there's room for, at a width you choose, and reflows the cards as the space changes.
Tags: layout, css, grid, responsive
Guide
How to extend scroll-reveal
Add your own reveal effects, use them in any direction, split them into text pieces, and run code when an element reveals.
- CSS
- TypeScript
Tags: motion, scroll, css
For designers
Line up the parts of cards with subgrid
Subgrid lets the cards in a row share one set of rows, so titles and estimates line up across the row, however long the text in each card.
Tags: layout, css, grid
Snippet
Marquee
Auto-scrolling row that is also a real horizontal scroller, endless in both directions.
- HTML
- Astro
- React
- react
Tags: motion, layout
Snippet
Pixelate image
On hover or focus, an image breaks into large pixels and stays pixelated until the pointer or focus leaves.
- HTML
- Astro
- React
- react
Tags: motion, image, canvas
Snippet
Reel
Carousel on native scroll snap. Items per view, peek, loop, container or centre alignment, free-placed arrows, bar, dot or line pagination, and autoplay.
- HTML
- Astro
Tags: layout, motion, carousel
Snippet
Scroll reveal
Reveal any element on scroll from a data attribute. Cards, images and sections fade, zoom or blur in with CSS; text can stagger by line, word or letter with GSAP, in order or at random.
- HTML
- Astro
- React
- gsap
- react
Tags: motion, scroll, image, text
For designers
Set line length in characters with ch
A unit as wide as the 0 in the current typeface, so a text box can be sized by how many characters fit on a line.
Tags: typography, css, units
For designers
Share out space with grid and fr
The fr unit splits the space in a row by ratio, so an image can take 40% of a card at every width, in CSS grid and in Figma's grid.
Tags: layout, css, grid, figma
For designers
Size text with rem and em, not px
Sizes in rem follow the reader's own text setting and sizes in px ignore it; sizes in em follow the text they sit in.
Tags: typography, css, units, accessibility
Snippet
Word wipe
Text that reads in word by word as you scroll, each word lifting from faint to fully opaque.
- HTML
- Astro
- React
- gsap
- react
Tags: motion, text, scroll

Results