Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt
Use this file to discover all available pages before exploring further.
Sigil renders a self-contained, animated SVG mystical symbol. Each variant draws itself onto the screen using a Framer Motion pathLength spring animation, emerging from invisible to fully drawn over ~2.5 seconds. A configurable glow filter and customisable color make sigils composable as decorative accents across any page.
All sigil variants are drawn inside an SVG
viewBox of 0 0 100 100. The size prop scales the rendered element’s width and height in pixels — it does not change the internal coordinate space. A size={200} sigil is simply a 2× upscaled version of the same 100-unit geometry.Props
The sigil variant to render. Each variant is a distinct SVG composition with its own path geometry. See Variants below for visual descriptions.
The rendered width and height of the SVG element in pixels. Scales the entire sigil uniformly without altering internal coordinates.
The stroke and fill color applied to all paths and shapes within the sigil. Accepts any valid CSS color string (hex, rgb, hsl, etc.). Also controls the glow filter: the drop-shadow uses this color at 25% opacity (
${color}40).A Framer Motion animation delay in seconds applied to the path-drawing entrance. Use staggered delays when composing multiple sigils on the same view to create a sequential reveal effect.
Additional CSS classes to apply to the root
<svg> element. Useful for positioning, opacity, or responsive sizing via Tailwind utilities.Variants
star
A classic eight-point star overlaid on a large circle, with a dashed inner circle as a secondary detail. The circle and star polygon animate their pathLength from 0 to 1, while the dashed ring fades in alongside them.
moon
A crescent shape formed by a curved SVG path, paired with a dashed outer ring that encircles it. The crescent path draws in first, followed by the surrounding ring, suggesting a moon phase diagram.
alchemy
Three elements drawn in sequence: a triangle polygon (the alchemical delta symbol), a horizontal bisecting line, and a small circle at the center. Together they evoke a classical alchemical or elemental glyph.
eye
An oval iris path, a containing outer circle, and a small filled pupil dot at the center. The oval and circle animate via pathLength; the pupil fades in with an opacity transition, completing the eye once the surrounding geometry is drawn.
Animation Details
All variants share the same Framer Motion animation configuration:| Property | Value |
|---|---|
| Initial state | pathLength: 0, opacity: 0 |
| Animated state | pathLength: 1, opacity: 1 |
| Transition type | Spring |
| Path duration | 2.5 seconds |
| Opacity delay | Controlled by delay prop |
| Animation label | initial: "hidden", animate: "visible" |
pathLength produces an organic, hand-drawn feel — paths accelerate out of the gate and gently settle into their final form rather than arriving at a fixed linear rate.
Glow Filter
Every variant applies a CSSfilter to the root SVG:
color prop at 25% opacity. The glow is present from the moment the paths become visible and intensifies naturally as more of the path is drawn.
Usage Examples
delay values: