Nine landing pages
Nine techniques, and nine pages that survive without them.
Each of these demonstrates one thing: a masked reveal, a held frame, a row driven sideways, a mask that follows your pointer. What makes them worth showing is not the movement. It is that all nine are complete, correct and good looking in a browser that refuses to run any of it, and for a reader who has asked their machine to stop things moving.
Demonstrations, not case studies
Every business named in these nine is invented and every word on them is sample copy. None of it is work done for a client, and there are no results, customer counts or testimonials anywhere in the set.- Examples
- 9
- Techniques
- 9
- Animation libraries
- 0
- Kilobytes of motion JavaScript
- 1
01
Furniture maker
First Light
Masked text reveal
The page spends its whole personality in the first second and then goes quiet, so the entrance has to carry it. Lines rise out of a clip mask with opacity untouched, which is the only entrance that can run on the largest element on the page without deferring the paint that pays for it.
With animation off
The headline, the figure and the button are all in their final positions on the first frame. There was never a hidden state to restore.Sablewood Kitchens - invented
02
Pottery studio
The Long Take
Sticky held frame
A making process is a sequence, and a sequence reads best when the thing being made holds still and the words move past it. One frame is pinned for the length of the section while five beats of copy travel through - so the reader is scrubbing a shot rather than scrolling a page.
With animation off
Sticky positioning is layout, not animation, so the frame still holds in every browser. Without the scroll-driven layer the wheel simply does not turn.Foundry Lane Ceramics - invented
03
Professional services
The Deck
Scroll-driven section choreography
Four services that are genuinely sequential deserve to be dealt rather than listed. One timeline declared on the container choreographs all four panels from offset ranges, so the set moves as one arrangement instead of four components each firing at their own trigger.
With animation off
The panels still stack and hand off, because that is sticky positioning doing it. What is lost is the dimming of the panel underneath, which was never carrying meaning.Ridgeline Advisory - invented
04
Architecture practice
Sidewinder
Scroll-linked progress element
A body of work is a row, not a column. Vertical scroll drives the row sideways, and the same named timeline that moves the row fills the index rail underneath it - so the position indicator cannot drift out of step with the thing it indicates, because it is not a second calculation.
With animation off
The pinned layout is only declared where the timeline exists. Everywhere else the row is an ordinary horizontal scroller with snap points, and the index rail sits full rather than empty.Longshore Studio - invented
05
Type foundry
Typeset
Staggered grid arrival
A specimen is a grid, and a grid that arrives all at once reads as a page load rather than as a composition. The stagger index is the sum of the row and the column, so the reveal crosses the grid as a diagonal wave and the eye is given an order to read it in.
With animation off
Every cell of the specimen is present, in position and legible on first paint. The wave is the only thing that is missing.Feldspar Type Foundry - invented
06
Paint manufacturer
Magnet
Pointer-driven mask
A paint company sells the difference between two colours in the same light, and no static image shows that. A soft radial mask follows the pointer and paints the second colourway through the first, so the comparison happens where the reader is looking rather than in a slider they have to operate.
With animation off
The mask layer is never rendered at all unless there is a fine pointer and motion is allowed. Both colourways are named and swatched in the copy regardless, so nothing is only available by hovering.Verdigris Paint Works - invented
07
Same-day courier
Velocity
Marquee
A courier sells movement, so the page should have mass. Two of the three bands are bound to the document scroll rather than to a clock - they cannot move unless you move, and they reverse mid-word when you scroll back, which is the difference between physics and decoration.
With animation off
Each band is a plain horizontally scrollable strip that a reader can push with a thumb. The text is the same text and none of it is clipped.Kestrel Courier Co - invented
08
Energy monitoring
Telemetry
@property-animated gradients
A gauge is a conic gradient and a bar is a linear one, and a gradient stop cannot be interpolated at all until the custom property behind it is registered with a type. Registering it is what turns a hard jump at the halfway point into a sweep - which is the whole reason this page is the one that dramatises numbers.
With animation off
Every gauge, bar and counter is declared at its final value in the base rule. With nothing animating, the panel reads as an instrument at rest rather than an instrument at zero.Northbeam Energy - invented
09
Rural hotel
Depth of Field
CSS anchor positioning
The page is a three-plane diorama, and the honest way to label a plane is to tether the label to it rather than to a hand-tuned pair of coordinates that breaks at the next breakpoint. Anchor positioning does that in CSS with no measuring in JavaScript, and the type itself never parallaxes because nobody should have to read a moving target.
With animation off
Where anchor positioning is not supported the three notes are an ordinary numbered list under the figure, which is what they are in the markup to begin with.Cairnwell Lodge - invented
How they are built
The finished state is the default, on all nine.
Nothing in this set is authored hidden. No element starts at zero opacity, no headline waits for a script, and no page has a state that has to be undone for a reader who has asked for less movement. Every motion block is declared inside a preference query, and every block that reads scroll position is declared inside a support query as well, because scroll-driven animation has not shipped in Firefox.
That is what a reader in Firefox gets: not a fallback that somebody had to design, but the base state, which was the finished page all along. It is also why the progress indicators in this set default to full rather than to empty, and why the one page with a pinned horizontal row does not declare the pinned layout at all unless the row can actually move.
Across the nine there is roughly one kilobyte of JavaScript doing motion work: a pointer loop on the page that needs a pointer, and one scroll listener writing one number. There is no animation library anywhere in the project.