How to walk this page. Every yellow label says what you should see. Tags: [guest] needs a private window with no login; [desktop] needs a mouse; [narrow] needs the window below 768px; [editor] is checked in the block editor without saving. Write down the number of anything that doesn’t match its label.
A. First paint
Check these in the guest window on the very first load, before scrolling.
1. Video poster above the fold [guest, first load]
The poster image is there straight away at its final size. No oversized flash, no empty box, and nothing jumps when the page finishes loading.
2. Video plays on the first click [guest]
Click the play badge once. The video starts on this page on that first click. It doesn’t open YouTube in a new page, and it doesn’t need a second click.
3. Eager toggle [guest, inspect]
Two image rotators. Right-click each image and choose Inspect. Left (“Above the fold” on): the img has loading="eager" and the class ilm-eager. Right (off): loading="lazy" and no ilm-eager. Both show an image, not a blank box.
Above the fold: on
Above the fold: off
B. Text effects on a heading with inline colour and an em dash
This heading shape (a coloured word plus an em dash) is what broke the mask. Reload the page to replay these.
4. Pixel reveal [front end]
Pixel squares dissolve away to show the full heading. “faster” stays purple, the em dash is there, and when it finishes there’s one clean copy of the text: no leftover squares, no doubled text.
Launch faster — without the page builder
5. Line reveal [front end]
The line is revealed by a sweep. The final heading is identical: “faster” purple, em dash present, nothing clipped at the edges.
Launch faster — without the page builder
6. Decrypt [front end]
Characters scramble, then settle into exactly “Launch faster — without the page builder”. “faster” is purple throughout, and the line doesn’t change width or wrap when it settles.
Launch faster — without the page builder
7. Typewriter [front end]
The heading types left to right with a caret. The em dash appears in its place. When it finishes, the text is complete and the heading doesn’t shift or jump.
Launch faster — without the page builder
8. CSS text animation on the same page [front end]
The words fade up one after another. When it finishes the whole heading is visible. Its only job is to put the text-animation stylesheet on this page, which is the combination that blanked a section. That’s section C.
Words arrive one by one
C. Entrance reveals on a page that also has text animations
Scroll down slowly. Each block should animate once as it comes into view, and every card should end fully visible.
9. Drop, staggered [guest + logged in]
The six cards drop in one after another. When it finishes all six are fully visible. No blank grid, and nothing stays invisible.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
10. Swing, staggered [guest + logged in]
The six cards swing in one after another. All six end fully visible, with no blank grid.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
11. Fade up, staggered [guest + logged in]
The cards fade up one after another, and all end visible.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
12. Soft blur, staggered [guest + logged in]
The cards un-blur into focus one after another, and all end sharp and visible.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
13. Drop and Swing, whole block [guest + logged in]
The next two grids animate in once as whole blocks: the first drops in, the second swings in. Both then stay fully visible.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
Converts Like Crazy
Proven frameworks that turn visitors into loyal customers — consistently
Blazing-fast
Sub-second load times that keep visitors engaged and ready to convert.
SEO Optimised
Fully SEO-optimised for Google, and AI platforms — driving traffic 24/7.
Fully Responsive
Pixel-perfect looks good on every device — desktop, tablet, and mobile.
Built-in Security
Enterprise-grade security that keeps your site and users protected.
Scalable By Design
Built to grow with your business — no rebuilds, no limits. Faster under load.
D. Hover effects
Desktop with a mouse. Move onto each card, then away again.
14. Lift [desktop]
The card rises a few pixels and gains a soft shadow, then settles back when you leave.
container lift
Body copy for container lift.
15. Scale [desktop]
The card grows slightly and shrinks back when you leave.
container scale
Body copy for container scale.
16. Glow [desktop]
A soft indigo glow appears around the card.
container glow
Body copy for container glow.
17. Border highlight [desktop]
A thin pink ring appears just inside the card edge. The card doesn’t change size.
container border
Body copy for container border.
18. Gradient sweep [desktop]
A pink sheen slides across the white card once as you move onto it. Before this release it did nothing at all.
container sweep
Body copy for container sweep.
19. Image zoom [desktop]
The photo inside the card grows slightly and stays clipped to the card. The text doesn’t move. Before this release it did nothing.
container zoom
Body copy for container zoom.
20. Background shift [desktop]
The card fills with indigo.
container bgshift
Body copy for container bgshift.
21. Sweep on each card [desktop]
Hover each of the three cards in turn. Only the card under the mouse sweeps.
Card 1
Body copy for Card 1.
Card 2
Body copy for Card 2.
Card 3
Body copy for Card 3.
22. Zoom on each card [desktop]
Left card (has a photo): its own photo zooms on hover. Right card (plain white): nothing changes, and it never shows the left card’s photo, at rest or on hover.
Card with its own photo
Plain card, no photo
23. Zoom plus gradient border (known limitation) [desktop + phone]
Known and not fixed in this release (future list, item 9). On desktop the gradient ring is NOT drawn, and the zoom shows only as a thin band at the edge. On a phone or other touch screen the ring is visible. Only report this if it looks worse than that, e.g. hidden text or a broken layout.
gradient + zoom
Body copy for gradient + zoom.
E. Parallax
Scroll slowly past each block. Parallax is off if your device prefers reduced motion; turn that off first.
24. Parallax, whole block [guest + logged in]
The grid moves a little slower than the page as you scroll, as one block.
25. Parallax, each card [guest + logged in]
The cards move at different speeds. Their tops are out of line as the grid enters and leaves the screen, and line up in the middle.
26. Image parallax in a rounded frame [front end]
The photo drifts inside its frame as you scroll. All four corners stay rounded, and no square photo corner pokes out.
27. Card parallax in a rounded group [front end]
The cards drift as you scroll, and the group’s rounded corners still clip them.
28. Parallax plus hover on the same block [desktop]
The block drifts as you scroll. Stop, hover it, and a pink sheen slides across it. Both work together.
pxself + sweep
Body copy for pxself + sweep.
F. Rotators
Watch each one for about ten seconds.
29. Text rotator, pixel reveal [guest + logged in]
The bold phrase changes every couple of seconds through a pixel dissolve. The line around it never jumps, and no squares are left behind.
Our release
30. Text rotator, decrypt [guest + logged in]
Each phrase scrambles, then settles into readable text. The line doesn’t jolt sideways as the phrase length changes.
31. Image rotator, pixel reveal [guest + logged in]
The images change through a pixel dissolve. There’s never a blank frame between images.
32. Image rotator with a linked video [guest + logged in]
The first image has a play badge. Click it once. The video opens in a lightbox over this page on that first click, and closes back to this page. Try it in the guest window too.
G. Countdown in a vertical Stack
Each grey box is a centred vertical Stack. Watch the digits for a few seconds.
33. Countdown, Left [front end]
The timer sits against the LEFT edge of the grey box. The digits tick down every second.
34. Countdown, Center [front end]
The timer is centred in the grey box and ticks.
35. Countdown, Right [front end]
The timer sits against the RIGHT edge of the grey box and ticks.
H. Responsive layout and inherited styles
Use a wide window first, then narrow it (or DevTools device mode) for the [narrow] checks.
36. Responsive width [desktop + narrow]
Wide window: the indigo box is about 900px wide and centred. Between 768 and 1024px wide: about 600px, still centred. Below 768px: full width.
Responsive width box
37. Mobile order [desktop + narrow]
Wide window: columns read A, B, C from left to right. Below 768px they stack in the order C, A, B.
A
B
C
38. Fork classes beside a block without them [front end]
Left: the two cards have a soft drop shadow, and the sentence above them has a faint text shadow. Right: the same cards with no shadow at all. Both sides are the same size and layout.
With legacy Twentig classes
Card
Card
Without them
Card
Card
I. In the editor
Open this page in the block editor. Don’t save.
39. Countdown ticks in the editor [editor]
In section G, all three timers count down live in the editor canvas, each at its own alignment.
40. Sweep and Zoom in the editor [editor]
In section D, hovering the Gradient sweep and Image zoom cards in the canvas shows the same sheen and zoom as the front end. Then select the “Zoom on each card” grid and open Hover. The Amount help reads: “Scales the block’s own background image within its frame. Applied to each card, each card scales its own background.”