Engaging Content Designs
Making Content Pop
In the age of endless scrolling, capturing attention is an art . We’ve added a suite of tools to help you do just that, inspired by the visual storytelling of Vox and high-quality periodicals.
1. The Highlight
You can now use a marker-pen style highlight to emphasize key phrases. It’s not just a background color; it has a subtle gradient to mimic a real highlighter.
“Design is not just what it looks like and feels like. Design is how it works .”
Available colors: yellow (default), green, pink, blue.
2. Hand-Drawn Emphasis
Sometimes you want to circle something on a “digital paper” to draw the eye.
The suspect was last seen near the old warehouse .
These elements animate when they scroll into view, adding a dynamic feel to static text.
3. Squiggly Lines
For a softer emphasis or to indicate something “uncertain”, use the squiggly underline . It mimics a pen squiggle.
4. Marginalia
Use marginal notes to add context without breaking the flow.
5. Visual Storytelling
Combine these elements to create “investigative board” layouts or annotate images.
The “Red String” Board
Evidence A connects directly to Evidence B .
Source Code
These components are built with Astro and inline SVGs. They use IntersectionObserver to trigger animations only when the reader sees them.
<Highlight color="yellow">Hello World</Highlight>
<Circle delay={300}>Target</Circle>
<Arrow direction="up" />Enjoy creating more engaging content!
