labs.google, the page effects

Captured and measured 24 and 25/10/2026 with full Chromium at 1440 by 900, a video recording of each effect and frame-by-frame reading of it. Twenty-two pages were surveyed. Frames and numbers are internal evidence in captures/; nothing of theirs is copied.

Which tool found what. Firecrawl's site map listed the pages (about 100 addresses) and its scrape gave the first reading of each page's structure and claimed type sizes (a pointer, not a measurement: the claimed sizes were not confirmed by computed styles). The project's own probe found the effects: counts of canvases and animation frames, computed styles, the clip paths in the DOM, the Lottie file that drives the home hero, and the video of each effect.

Runners-up noted, not built: Project Genie's pinned list with blurred inactive items beside a changing panel, and a wireframe globe ringed by fisheye bubbles.

The three effects

T1 · A slide change through a rotating shape that grows past the frame

On the home page the hero is driven by a Lottie file. To change slide, the next slide, headline included, is revealed through a small rounded square standing on its corner. The shape grows and turns upright as it expands, and passes the edges of the frame. The old slide stays visible outside the shape, so for a moment the headline is split between the two (we saw "Pla Flow nd"). Measured from a 25 fps recording: the wipe starts about 7.52 s into the recording and fills the frame by about 8.32 s, so about 0.8 s, with a plateau between roughly 7.84 s and 8.08 s where the shape is nearly the frame size.

The technique, in generic terms. The reveal is a shape, not an edge. Because the shape carries the new slide's own content (not a flat colour), the eye reads the change as one object arriving, and the seam is the interesting part. A rotating square needs only transforms to build: an outer box rotated and scaled, with the slide counter-rotated inside it so the slide itself stays upright.

Suits. A short series of statements or products, each with one big headline; brands whose identity has a shape in it. Does not suit. Anything people read at their own pace (the seam makes half a sentence unreadable for 0.8 s), slides carrying small print, and carousels where order matters to the visitor. Failure mode. See F1.

T2 · A title made of bars that the pointer scatters and that heal

The Playground title is drawn on a canvas (backing store 1449 by 384, shown at 850 by 225 on a 1440 viewport). Each letter is a pixel-style face cut into horizontal bars about 4 to 5 px tall. The pointer is a wake: bars it passes slide sideways and drop out, a click punches a bigger hole, and the title reforms behind it. Measured by comparing the title area with its resting frame after one fast pass: 14.9% of pixels changed at once, 12.6% after 0.3 s, 8.3% after 0.8 s, 5.7% after 1.2 s, 1.2% after 2.0 s. That is a heal with a time constant of about 1.2 s, complete in about 2 s.

The technique, in generic terms. Build type from rows. A row is the unit of damage: it can shift, thin or vanish, so the damage looks like a broken scanline, not a smudge. Healing runs per row with exponential return, so the title is never lost for long. Suits. A playful tool, a game, a launch page whose title is a toy. Does not suit. Anywhere the heading must be read at once. Failure mode. See F2.

T3 · Named followers on springs of different stiffness

On Play with Putty, three tagged cursors (a name on a coloured pill beside an arrow) sit in the top-left corner until the pointer moves, then trail it. Measured from sampled positions every frame after the pointer crosses the page: all three follow, with lags that differ visibly (1.5 s into a sweep the three sat at x 453, 508 and 593 on one frame, always in the same order, the first listed trailing furthest), and they keep gliding for about two seconds after the pointer stops, easing onto it. Tag text is 16 px, pill colours are distinct (green, pink, yellow).

The technique, in generic terms. One pointer drives several springs with different stiffness and damping. The visitor is shown a small crowd without any being there. Suits. A shared or collaborative tool, to show what the product does. Does not suit. Any page where the cursors could be mistaken for real people. Failure mode. See F3.

Three more, taken on 26/10/2026

Pete asked for three more after the first three were approved. They come from pages the first pass surveyed and left alone (the 404 on Portraits, Gen Dino, the Labs home intro), each measured live in full Chromium at 1440 by 900.

T4 · A 404 that fills up

The 404 page holds seven SVG shapes (rounded squares, hexagons, circles and a four-lobed clover, 290 to 440 px across) inside a falling-elements component. Sampled every 100 ms from navigation: they enter from above from about 0.2 s, accelerate, tumble, and come to rest in a pile by about 3.5 s, with resting angles that follow the shape (the hexagon lay at 87 degrees, a square at 45, circles at 0). The cursor over them is grab; a drag picks one up and a release throws it, and the others around it move. After a throw the thrown shape took about 1.5 s to settle.

The technique, in generic terms. Decoration is made into a physical object. The page's emptiest moment, an error, is given something to play with, and the physics makes it feel solid because shapes rest on each other. Suits. An error page, an empty state, a thank-you page. Does not suit. Any page where the action must be reached at once. Failure mode. See F4.

T5 · A pixel title with a resident

Gen Dino's title is built from stepped pixel blocks: dark faces with a lighter, outlined shelf offset down and to the left, so each letter looks cut from a thick slab. The scene is SVG (418 groups, 363 paths), with clouds and stars drifting past (the cloud groups moved about 118 px a second) and a small pixel character, a different one on each visit (a car, a monkey, a penguin seen), that runs and jumps in the gap between the words and kicks up dust.

The technique, in generic terms. A title is given an inhabitant. The letters stop being a banner and become a place, and the visitor's first thought is to make the character do something. Suits. A game, a café, a children's brand, a launch with a mascot. Does not suit. A sober page, or any title the visitor must read in a hurry. Failure mode. A title made only of pixels has no heading (F2).

T6 · Shapes that fuse

The Labs home intro shows big flat shapes (yellow, blue, pink, green) drifting in before the page text. Where two come together they do not overlap: they merge, with a smooth neck whose width follows how close they are, and the neck thins and snaps as they part. The frames show the yellow pair joining and parting several times in under three seconds.

The technique, in generic terms. Soft-body merging of flat colour. It reads as paint or liquid with no texture at all, and it makes a plain background feel alive. Suits. A brand with colour at its heart, an intro, a loader. Does not suit. Data-heavy pages. Failure mode. See F5.

T7 · A list where only the active line is sharp

Project Genie's overview lists its features as buttons beside a changing panel. The inactive buttons carry a class that sets filter: blur(3px) with a 0.2s ease-in-out transition, and the active one has no filter (measured from computed styles on the live page, in every scroll position checked). The technique, in generic terms. Focus is shown by sharpness: one item is clear, the others recede, so the eye is told where to be without any other signal. Suits. A process told in a few steps. Does not suit. Anything the visitor must read in full or compare. Failure mode. Text that is blurred is text that cannot be read: see F6.

Failure modes

F1 · The seam

A wipe that splits a headline is fine at 0.8 s and a fault at 2 s. Keep the wipe under a second, never auto-advance while someone is reading, never block keyboard focus during it, and under reduced motion swap slides without moving anything.

F2 · No text, no heading

A canvas has no words. The Playground page keeps the real heading in the page for assistive technology; the canvas is the picture of it. A copy that draws a title only on a canvas fails the person using a screen reader and anyone whose canvas has not painted yet.

F3 · Pretending to be people

Cursors with first names look like colleagues. On a real product that is a claim. Label them as a demonstration, or make them the visitor's own guides, never imitation users.

F4 · The pile on top of the way home

A heap of shapes that settles over the button is a page with no exit. The shapes here are confined to the floor under the text, the way home is above them, and they cannot be dragged out of the frame.

F5 · The filter fuse

The usual way to make shapes fuse is a blur followed by a contrast or threshold filter over the whole layer. That is a full-frame filter pass every frame, it blurs and mixes colour unpredictably, and canvas filter is missing in some browsers. Drawing the neck as a curve between the two circles costs almost nothing and is the same everywhere.

F6 · Blurred is unreadable

Blur as a focus cue is a reading barrier for anyone with low vision, and for anyone who wants to see the whole list. The answer is to lift it on hover, focus and keyboard, to offer a single control that lifts it everywhere, and to drop it under reduced motion.

Instrument traps

I1 · The follower is the parent, not the label

The first probe sampled the label's own transform and read a fixed translate(80px, 80px) for 9 s, which looks like "nothing moves". The movement is on the absolutely positioned parent, and only after the pointer moves. A probe that never moves the pointer measures the resting state of anything that waits for it.

I2 · Bounding area

Measuring the wipe by the bounding area of "new" pixels was polluted by the navigation dots, which are lit all the time. Reading frames by eye, then timing the first and last frames of the shape, was reliable.

Sub-sites surveyed, 26/10/2026

Pete asked for more research from Labs after the moon and planets tab did nothing. Six sub-sites were loaded in full Chromium at 1440 wide, scrolled in four steps, and their DOM counted.

• Flow: a wall of 126 looping videos behind a giant wordmark, a few CSS keyframes (a bounce and a fade-in slide), 116 elements carrying a filter, four sticky elements. The picture is a mosaic of moving tiles under one line of type.
• Pomelli: no canvas, no video, no running animation, and no transformed element on the hero. The scattered cut-out cards round a serif wordmark are a still collage; the life is in the composition, not in motion.
• Mixboard: the same idea, a loose collage of tilted picture cards and a cut-out banana round the title, with a script line under it. Also still.
• Disco: eight embedded videos and a long page; its pointer idea is shown in a video, not built into the page.
• Stitch and the Labs landing page: nothing moving.

What this means for what we build: the sub-sites are mostly composition, not mechanics. The two ideas worth taking are a wall of small loops under one headline (Flow) and a collage of cut-out cards you can handle (Pomelli, Mixboard). Either would be built from scratch as our own plate on an invented business.