Chapter 7: Text & Content Effects

Core Idea

Typography and content-reveal animation — components that make text itself the animated element, plus a few content-display utilities (code, terminal, link preview) that recur across marketing pages.

Reference Table

Name	Purpose	Install
Canvas Text	Animated text with colorful curved lines, clipped to the text shape	npx shadcn@latest add @aceternity/canvas-text
Chromatic Image	Image with color-separation/displacement/tilt on interaction	npx shadcn@latest add @aceternity/chromatic-image
Container Text Flip	Container that flips through a word list, animating width	npx shadcn@latest add @aceternity/container-text-flip
Colourful Text	Multi-color text with filter/scale effects	npx shadcn@latest add @aceternity/colourful-text
Squiggly Text	SVG turbulence/displacement squiggle effect under text	npx shadcn@latest add @aceternity/squiggly-text
Text Generate Effect	Text fades in word-by-word on load	npx shadcn@latest add @aceternity/text-generate-effect
Text Hover Effect	Gradient outline that animates on text hover (as seen on x.ai)	npx shadcn@latest add @aceternity/text-hover-effect
Text Reveal Card	Mouse-move reveals hidden text at the bottom of a card	npx shadcn@latest add @aceternity/text-reveal-card
Text Flipping Board	Split-flap character animation (inspired by Vestaboard)	npx shadcn@latest add @aceternity/text-flipping-board
Typewriter Effect	Text types itself onto the screen	npx shadcn@latest add @aceternity/typewriter-effect
Flip Words	Cycles through a list of words in place	npx shadcn@latest add @aceternity/flip-words
Encrypted Text	Gradually reveals text from a gibberish/encrypted state	npx shadcn@latest add @aceternity/encrypted-text
Link Preview	Dynamic hover preview card for anchor links	npx shadcn@latest add @aceternity/link-preview
Pointer Highlight	Highlights in-view text with a pointer + border accent	npx shadcn@latest add @aceternity/pointer-highlight
Code Block	Syntax-highlighted code block (built on react-syntax-highlighter)	npx shadcn@latest add @aceternity/code-block
Images Badge	Badge that reveals a stack of images on hover	npx shadcn@latest add @aceternity/images-badge
Images Slider	Full-page image slider, keyboard-navigable	npx shadcn@latest add @aceternity/images-slider
Keyboard	Mac-style keyboard with mechanical key sound effects	npx shadcn@latest add @aceternity/keyboard
Terminal	Mac-style terminal with bash syntax highlighting + typewriter effect	npx shadcn@latest add @aceternity/terminal
Cover	Wraps children with a beam/space hover-reveal effect	npx shadcn@latest add @aceternity/container-cover

Key Takeaways

1. For headline emphasis, several options exist at different intensities: Colourful Text (subtle), Text Hover Effect (interactive), Text Flipping Board / Typewriter Effect (attention-grabbing) — match intensity to how often the page is revisited (frequent visitors tire of loud effects fast).
2. Container Text Flip and Flip Words solve the same "cycle through words" job at different scopes — Container Text Flip animates the container width too, Flip Words is text-only.
3. Code Block depends on react-syntax-highlighter as an additional package beyond the standard Motion stack.

Connects To

• ch003 (Hero & Scroll Sections): text effects are most often paired with a hero backdrop from ch002/ch003.