Media & effects
Reveal Card
3D cursor physics tilt with interactive glare reveal
detent-reveal-card
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-pointer
- Group
- Media & effects
Cloud Engine
Edge-rendered compute with global failover.
4.1 KB gzip for the class module · inlines the shared spring
Variants
Quiet tilt
The same card with max-tilt="6".
Revealed on hover or when focus enters the card — tab into it to see the same final state without a pointer.
Hover a card to tilt it toward the pointer and reveal the secondary section; move away and the springs settle back. Tabbing into a card reveals the same section, and the hidden panel is not focusable or announced until it is revealed. This card and the one in the main preview both show a documentation-style “spec sheet” example with no live data.
Recorded states
hoverrecorded state; no setterreduced motionrecorded state; no setter
Usage
Import
import '/components/reveal-card/define.js';
// or register it yourself
import { DetentRevealCard } from '/components/reveal-card/reveal-card.js';Attributes
max-tilt
Properties
maxTilt
Slots
defaultreveal-content
Events
No events are recorded for this component.
Example
Runnable example: site/examples/reveal-card.ts. The snippet below is generated from the catalogued attributes.
<detent-reveal-card
max-tilt="12"
></detent-reveal-card>Source
The pinned upstream source for this row:
src/components/ui/RevealCard.tsxsha256 12b347fce994…
Native files
The native module and its artifacts:
src/components/reveal-card/reveal-card.tssrc/components/reveal-card/styles.csssrc/components/reveal-card/define.tsdocs/components/reveal-card.mdsite/examples/reveal-card.tstests/browser/reveal-card.spec.tsevidence/components/reveal-card.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
max-tilt | maxTilt | number | 12 | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
maxTilt | number | 12 | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
default | Consumer content; rendered through a slot, never re-created. |
reveal-content | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The measurement frame is the host box, not the already-transformed card, which removes the transform-to-sample feedback loop.
- Tilt clamps to plus or minus max-tilt.
- The reveal is driven by :host(:hover) and :host(:focus-within), which adds the keyboard path instead of React state.
- max-tilt clamps to 0..90 and warns once on non-numeric input.
What it does
A card that tilts toward the pointer inside a 1000px perspective, paints a radial glare at the pointer position and reveals a secondary section on hover or keyboard focus.
Upstream behaviour
- Cursor-aware 3D perspective rotation springs
- Dynamic radial glare reflection overlay
- Hidden metadata section revealed on hover
Differences from upstream
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The measurement frame is the host box, not the already-transformed card, which removes the transform-to-sample feedback loop.
- Tilt clamps to plus or minus max-tilt.
- The reveal is driven by :host(:hover) and :host(:focus-within), which adds the keyboard path instead of React state.
- max-tilt clamps to 0..90 and warns once on non-numeric input.