Loading craft...
Loading craft...
Morphing asset card with a split layout, rolling dropdown, and animated CTA so files feel alive instead of static.
This component was inspired by a design shared on X (formerly Twitter) by @ayushsoni_io. The original design featured a clean, fluid asset preview card with an elegant morphing action menu.
1import { FluidAssetPreview } from '@/craft/components/fluid-asset-preview';23<FluidAssetPreview4fileName="document.pdf"5fileDate="January 15, 2024"6thumbnailUrl="/path/to/thumbnail.png"7fileType="pdf"8onLinkClick={() => console.log('Link clicked')}9/>
| Props | Description | Default |
|---|---|---|
fileName | Display name for the asset. Shown in the left panel and used for accessible labels. | - |
fileDate | Timestamp or descriptive date string rendered beneath the title. | - |
thumbnailUrl | Optional thumbnail image. Falls back to a gradient block with the file type label. | - |
fileType | Short extension label (e.g., pdf, fig). Used for the fallback badge when no thumbnail is provided. | - |
onLinkClick | Callback fired when the link-out button is pressed. Ideal for deep-linking into your asset system. | - |