Patterns
Patterns, and what solves them.
A pattern is a common motion idea - magnetic button, scroll image reveal, marquee. Each page lists the Annnimate components that solve it with a decision matrix for which to pick.
Every pattern
- Hover CardA hover card responds to the cursor with a coordinated motion, a tilt toward the pointer, a lift, a content shift, or a 3D flip, so the card feels physical under the mouse.
- Magnetic ButtonA magnetic button is a call-to-action that tracks the user's cursor with spring-like easing, then releases back to its resting position when the cursor leaves.
- MarqueeA marquee is a continuously scrolling strip of content, text or logos or images, that loops seamlessly.
- Mega MenuA mega menu is a large navigation panel that opens below a top-level item to reveal grouped links, often with columns, descriptions, and media.
- Page TransitionA page transition animates the move between routes instead of a hard cut, a cover that wipes across, a shared element that morphs from one page to the next, or a fade that masks the swap.
- Parallax ScrollA parallax scroll moves layers at different rates as the user scrolls, so foreground and background drift apart and the page gains a sense of depth.
- Scramble TextA scramble text effect cycles each character through random glyphs before settling on the final letter, like a terminal decrypting a message.
- Scroll Image RevealA scroll image reveal uncovers an image as it enters the viewport, using a clip-path wipe, a mask, or a dissolve rather than a plain fade.
- Sticky CursorA sticky cursor replaces or augments the native pointer with a custom element that follows the mouse with smoothing, and reacts to what it hovers, growing over links, snapping to buttons, showing a label.
- Text Mask RevealA text mask reveal uncovers a headline by wiping a mask across it, line by line or all at once, rather than fading it in.
