Fieldbook
Sign in

Text effects

Stacked shadow text

Bold italic display text sits in front of several staggered drop shadows in different colors, giving it a layered, extruded look that flattens to a clean line on hover.

Using Stacked shadow text

Bold italic display text sits in front of several staggered drop shadows in different colors, giving it a layered, extruded look that flattens to a clean line on hover.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: text, shadowColor, depth

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Cube flip letters
2136Cube flip lettersText effectsHovering a line turns every letter a quarter turn in 3D, one after another from a chosen origin, revealing a second face that carries the same glyph in the accent.
Hover speed text ring
2367Hover speed text ringText effectsA phrase set in a ring of outward-facing letters that spins gently at rest and dramatically changes speed while the pointer hovers it.
Pointer scramble text
2818Pointer scramble textText effectsMoving the pointer across a paragraph scrambles the nearby characters into symbols that settle back to the real letters as the cursor moves away.
Split Reveal Hover Text
2048Split Reveal Hover TextText effectsText is sliced into a top and bottom half; on hover the top half slides away and fades while the bottom half glides up to complete the word, and it reverses when the pointer leaves.
Ascii Art Heading
2301Ascii Art HeadingText effectsA large word is rendered as a mosaic of monospaced characters whose density mimics the letterforms, gently rippling and tilting toward the pointer.
Aurora glow heading
1915Aurora glow headingText effectsA headline where one word carries a slow-drifting multicolor gradient fill clipped to its letterforms, like aurora light glowing behind the type.