Custom
Footer Monogram
Large footer watermark monogram with Framer Motion animation variants.
Preview
Live component example.
Animation variants
Large footer watermark with Framer Motion presets. Hover each card to compare draw, trace, glow, pulse, shift, reveal, and loop styles.
Draw
Primary stroke traces the mark on hover while the fill softens.
Hover to preview
Trace
Fast simultaneous stroke trace with a snappy ease.
Hover to preview
Glow
Stroke draw with a primary glow and lifted fill.
Hover to preview
Pulse
Spring scale pulse on the filled mark — no stroke layer.
Hover to preview
Shift
Accent piece slides and rotates into place on hover.
Hover to preview
Reveal
Mark scales up from the baseline with a fade-in.
Hover to preview
Loop
Continuous stroke loop for loading or decorative states.
Plays continuously
None
Static watermark with no motion.
Hover to preview
Sizes
Scale presets from compact marks to full-width footer watermarks.
Small
Medium
Large
Footer usage
Default configuration used beneath the site copyright bar.
Props
| Prop | Type | Default |
|---|---|---|
| animation | draw | trace | glow | pulse | shift | reveal | loop | none | draw |
| size | sm | md | lg | footer | footer |
| fillTone | muted | subtle | foreground | muted |
| strokeTone | primary | foreground | accent | primary |
| trigger | hover | always | hover |
| strokeWidth | number | 2.5 |
import { FooterMonogram } from "@/components/brand/footer-monogram"
<FooterMonogram animation="trace" size="footer" />
<FooterMonogram animation="glow" fillTone="subtle" strokeTone="primary" />
<FooterMonogram animation="loop" size="md" />