Pro Cards Suite
Standalone physical cards: HoloFinishCard, ParticleRevealCard, GlassShatterCard, and FrostHoverCard.
On This Page
Pro Components
Pro Cards Suite
Four standalone physical cards engineered for high-end product presentation. Each accepts any transparent PNG silhouette via the src prop.
npx nexoreui add holo-finish-card
Interactive Playground
Aerospace Titanium & Sapphire
REF. 006E
$1,450
Cyber Chronograph
Finish
Configure Props
Max Tilt32°
Usage Examples
1. HoloFinishCard — Holographic Foil
Iridescent foil sheen masked to product PNG alpha channel with 3D cursor tilt.
HOLOGRAPHIC ALPHA FOIL
REF. 89FF
$1,450
HoloFinishCard
Finish
2. ParticleRevealCard — Pixel Synthesis
Spring-physics pixel particles assemble on load, repel from cursor.
Particle Physics
Synthesizing particles...
ParticleRevealCard
$899SPRING PIXEL SYNTHESIS
3. GlassShatterCard — Shard Physics
Click to shatter into jagged triangular shards with gravity and auto-restore.
Glass Physics
Click to shatter
GlassShatterCard
$650WATERTIGHT JAGGED SHARDS
60 shards4. FrostHoverCard — Steamed Glass
Frosted glass layer clears with a circular wipe mask following the cursor.
Frosted Vapor
FrostHoverCard
$320STEAMED VAPOR WIPED GLASS
25% WipedComponent Props Reference
HoloFinishCardProps
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | Transparent PNG image URL for standalone single-finish mode. |
| finishes | ProductFinishItem[] | [] | Array of finish variants with name, PNG image, and holoColors. |
| intensity | "subtle" | "medium" | "vibrant" | "medium" | Iridescent foil sheen intensity and reflective opacity. |
| maxTilt | number | 32 | Maximum 3D tilt angle in degrees during cursor tracking. |
| cardWidth / cardHeight | number | string | 360 / 480 | Outer card dimensions in pixels or CSS dimension string. |
| showLabels | boolean | true | Whether typographic plates (name, price, edition) are rendered. |
| showSwatches | boolean | true | Whether the interactive bottom finish swatch selector bar is displayed. |
ParticleRevealCardProps
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Transparent PNG image URL of the product. |
| particleSize | number | 2.2 | Size in pixels of each rendered pixel particle. |
| gap | number | 3 | Pixel sampling step/density. Lower value yields denser particles. |
| repelRadius | number | 85 | Cursor repulsion radius in pixels. |
| repelForce | number | 6.5 | Physical repulsion impulse force pushing particles away from cursor. |
| springStiffness | number | 0.08 | Spring acceleration pulling particles back to their home pixel coordinate. |
| scatterOnLoad | boolean | true | Whether particles begin scattered and assemble dynamically on load. |
GlassShatterCardProps
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Transparent PNG image URL of the product. |
| gridCols / gridRows | number | 5 / 6 | Triangular mesh subdivision density. |
| jitterAmount | number | 0.35 | Displacement factor for interior jagged vertex jitter. |
| shatterForce | number | 11 | Explosion impulse magnitude applied to shards upon click. |
| gravity | number | 0.36 | Downward gravitational acceleration acting on airborne shards. |
| autoRestoreDelay | number | 1600 | Delay in milliseconds before shards spring back into watertight position. |
FrostHoverCardProps
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Transparent PNG image URL of the product. |
| wipeRadius | number | 110 | Radius in pixels of the cleared circular aperture under the cursor. |
| blurAmount | number | 16 | Backdrop filter blur strength applied to steamed glass layer. |
| cardWidth / cardHeight | number | string | 360 / 480 | Outer card dimensions in pixels or CSS dimension string. |