@orangecheck/design / OcSigilProps
Interface: OcSigilProps
Defined in: tokens/sigil.tsx:44
OcSigil — the brand mark as a deep-set 3D emboss (aurora depth R3, Tier A+B).
The sanctioned figure placement is corner-bleed: the verb's own pictogram,
oversized and cropped by the hero's overflow-hidden, anchored to a corner
away from both the text column and the proof artifact. The RIGHT COLUMN
COVENANT is absolute: this frames a hero's proof — it never occupies,
replaces, or displaces it. Placement is a per-site art decision; the
component ships dormant and is mounted one line at a time (see MIGRATION.md
and research/AURORA-DEPTH-PLAN.md §3).
Two registers from ONE geometry, switched by data-oc-theme in CSS via the
--oc-sigil-lift / --oc-sigil-shade / --oc-sigil-ink-base endpoint
custom properties (SSR-resolved, zero hydration flash): ember renders a lit
letterpress relief (a warm highlight enters upper-left, walls sink into a
chromatic sienna shade, the back dissolves to transparent so the aurora reads
through); the four cypherpunk skins render the same silhouette as an unlit
crisp echo stack (lift = ink, shade = transparent). No color is hardcoded —
every layer is a color-mix() off the skin's own tokens.
Mark surgery (SSR string transforms, closed slug union, trusted vendored markup): the tile glyphs shed their rounded-square FRAME so the pictogram — not the tile — embosses; hairline strokes are floored and heavy ones capped so no mark vanishes or bloats at watermark alpha; a per-verb focus transform optically sizes each pictogram to fill the canvas. This intentionally diverges the sigil silhouette from the media-kit tile at display scale.
Degradation: SSR-painted markup (no JS needed for the static pose); drift
pauses under prefers-reduced-motion AND the oc_motion switch (.oc-ambient);
on phones it re-anchors top-right and stays quiet (never buried below fold);
hidden under forced-colors (SVG fills are not auto-stripped); parallax
(Tier B) only attaches on fine pointers with motion allowed, and a hero with
an animated/interactive proof must pass parallax={false} — one ambient
motion source per hero. The resting 0% keyframe IS the art: it is the
best-composed frame, which is what reduced-motion users are frozen at.
Properties
| Property | Type | Description | Defined in |
|---|---|---|---|
<a id="property-band"></a> band? | boolean | Emboss into a solid brand band (the .oc-sigil--band deboss preset: band-shaped mask + walls that sink into --brand) rather than corner-bleed. The consumer supplies --oc-sigil-ink (e.g. --brand-foreground). Under ember the band reads as a tone-on-tone deboss; under a cypherpunk skin it follows that skin's echo register. | tokens/sigil.tsx:63 |
<a id="property-classname"></a> className? | string | Size/position via the consumer's utility classes (e.g. w-[min(56vmin,540px)]). | tokens/sigil.tsx:65 |
<a id="property-corner"></a> corner? | "bottom-left" | "bottom-right" | "top-left" | "top-right" | Corner the mark bleeds off (crops against the hero's overflow-hidden). | tokens/sigil.tsx:49 |
<a id="property-glyph"></a> glyph | OcGlyphSlug | Which brand mark to emboss — the closed media-kit union, no default: a property without a normalized glyph cannot mount a sigil. | tokens/sigil.tsx:47 |
<a id="property-parallax"></a> parallax? | boolean | Pointer parallax (±5°, damped). Set false when the hero's proof artifact is animated or interactive (typing demos, countdowns, live forms) — the motion-budget rule, enforced by the caller's declaration. | tokens/sigil.tsx:55 |