AI animation for WordPress, described to your own assistant

“Add a features section: a heading whose words animate in one by one, then a grid of 6 cards that enter one after another.”

• Builds · The heading splits into words that enter in turn, and the cards follow with a growing delay.
• Needs · Nothing.
• Tested in · Etch

“Make the 5 service cards stick and stack on top of each other as I scroll: each one shrinks slightly, darkens and tilts back while the next slides over it. It must work with any number of cards.”

• Builds · Each card stays and the next one covers it; the one below shrinks, darkens and tilts back.
• Needs · Photos from the media library, or cards without photos.
• Tested in · Bricks and Etch

“In the hero, while I scroll, the title rises and fades away.”

• Builds · The title is whole when the page loads and leaves with the scroll.
• Needs · Nothing.
• Tested in · Etch

“Create a 6-step process section: the step numbers sit on a large circle that turns as I scroll, the step at the front lights up, its title and description change in a panel next to the circle, and a ring around the circle fills with the progress. On phones show it as a readable list.”

• Builds · A pinned scene: the wheel turns, the step in front lights up, its text changes and the ring fills. On phones, a numbered list.
• Needs · Nothing.
• Tested in · Bricks and Etch

“Create a split-scroll feature section: on the left a sticky image frame that crossfades with a subtle zoom between 4 images, on the right 4 text blocks that scroll normally. Each image must change exactly when its text block reaches the middle of the screen, and the active text is fully opaque while the others are dimmed. On mobile, each image sits above its text.”

• Builds · Each image changes as its text reaches the middle of the screen. Measured, it lands exactly.
• Needs · 4 images.
• Tested in · Bricks and Etch

“Create a portfolio gallery of 7 photos in one pinned horizontal row: as I scroll, each photo in turn eases into the center at full size with its caption, while the others shrink and dim. A counter like ‘03 / 07’ updates as the photos change. It must not look broken if I add an 8th photo later.”

• Builds · A pinned row where each photo moves to the center and the counter goes up. It works with 2 to 12 photos.
• Needs · The photos.
• Tested in · Bricks and Etch

“Create a company history timeline of 6 milestones: a line fills as I scroll down, each milestone lights up and its card slides in when the line reaches it, and a big year number in the background counts from 2015 to 2025 along the way.”

• Builds · The line fills to the middle of the screen, the dots light up and the big year counts.
• Needs · Nothing, or photos if you want them.
• Tested in · Bricks and Etch

“Create a product story section: a phone built in real CSS 3D, with visible thickness, sits pinned in the center and rotates as I scroll, while 4 feature captions appear one after another beside it, each one in sync with the phone’s rotation. End with a short closing section.”

• Builds · A phone with real thickness that turns and leans toward each caption.
• Needs · Nothing. It’s only CSS.
• Tested in · Bricks and Etch

“Create a cinematic hero: a giant word filled with a photo grows as I scroll until its letters become the full-screen background, then a headline animates in word by word and a button fades in over a dark layer.”

• Builds · The letters grow until the photo fills the screen, then the headline and the button come in.
• Needs · One strong photo.
• Tested in · Bricks and Etch

“Create a page for an agency: a hero with 3 depth layers (background mountains, mid layer, foreground) that move at different speeds while the title rises and fades, then a section of 3 large images that reveal from the center one after another, and at the very end the last section lifts like a curtain to uncover a still footer with contact details.”

• Builds · The hero layers move at different speeds, three images open in a circle one after another, and the last section lifts to show a still footer.
• Needs · 3 images for the layers. Cut out on a transparent background they look best.
• Tested in · Bricks and Etch

“Draw a winding road down the page that draws itself as I scroll, with a dot travelling along it and each stop lighting up as the dot passes.”

• Builds · The road draws itself with the scroll and a dot travels along it.
• Needs · An SVG of the path, yours or one your assistant draws.
• Tested in · Bricks