DecayCard
decay-cardDistorts and dissolves an image card according to pointer velocity.
Usage
Basic usage
When the mouse moves quickly across the image, the image is "melted/dissolved" by the turbulent displacement, stops and falls back; children renders text superimposed at the bottom.
Dissolve card
<DecayCard image="/cover.jpg">
Hulian
<br />
Dissolve card
</DecayCard>Fine particles dissolve
Improved baseFrequency and numOctaves, the noise is denser and the dissolved particles are finer.
<DecayCard
image="/cover.jpg"
baseFrequency={0.04}
numOctaves={6}
seed={11}
>
Fine noise
</DecayCard>Rough chunks
Reduce baseFrequency, increase maxDisplacement, and dissolve it into a thick, silky texture.
<DecayCard
image="/cover.jpg"
baseFrequency={0.008}
maxDisplacement={600}
seed={2}
>
thick block
</DecayCard>Size and translation boundaries
width / height controls the card size, and movementBound adjusts the soft border feel that follows the mouse translation.
<DecayCard
image="/cover.jpg"
width={220}
height={300}
movementBound={90}
>
Mini
</DecayCard>When to use
Use DecayCard for a highly expressive single image that appears to melt under a fast pointer pass, such as an artistic cover or hero. Use TiltedCard for general 3D tilt, or PixelCard for a pixel-wave background.
Import
import { DecayCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | 300 | Card width in pixels. |
| height | number | 400 | Card height in pixels. |
| image | string | "https://picsum.photos/300/400?grayscale" | Built-in grayscale placeholder displaced by pointer speed; replace it with a product asset. |
| alt | string | "" | Image alternative; empty treats the image as decorative. |
| baseFrequency | number | 0.015 | SVG turbulence frequency. Higher values create finer noise; 0.005 to 0.05 is recommended. |
| numOctaves | number | 5 | Turbulence octave count; more creates detail at higher cost. |
| seed | number | 4 | Random turbulence seed. |
| maxDisplacement | number | 400 | Peak displacement-map scale. |
| movementBound | number | 50 | Soft pointer-translation boundary in pixels. |
| className | string | — | Class name forwarded to the root. |
| style | CSSProperties | — | Inline styles forwarded to the root. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Bottom-aligned copy layered above and unaffected by the image filter. |
Usage notes
- The decay is strongest during fast pointer movement and is minimal on touch. Never use it as the only carrier of information.
- Large
numOctavesandmaxDisplacementvalues make the SVG filter more expensive per frame. - Replace the placeholder image in production and provide
altwhenever the image is informative. - Reduced motion stops the SVG displacement animation and leaves a static image.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<DecayCard
image="/cover.jpg"
width={300}
height={400}
baseFrequency={0.015}
numOctaves={5}
maxDisplacement={400}
movementBound={50}
>
Hulian
</DecayCard>