Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt
Use this file to discover all available pages before exploring further.
MarbledCard wraps content in a card styled with the .marbled-paper CSS utility — a layered radial-gradient on a cream base that creates a subtle paper texture reminiscent of hand-marbled book endpapers. It is used throughout the Projects and Case Studies pages to present work entries with a consistent, tactile feel.
Props
| Prop | Type | Default | Description |
|---|
title | string | required | Card heading displayed in the Fraunces display font at text-3xl. |
excerpt | string | required | Body text displayed below the title in text-teal-800. |
category | string | required | Category badge shown above the title with a cream background and teal border. |
delay | number | 0 | Scroll entry animation delay in seconds — use this to stagger cards in a grid. |
Animation behavior
MarbledCard uses Framer Motion’s whileInView prop to trigger its entry animation the first time the card scrolls into the viewport:
| Property | Initial | Final |
|---|
opacity | 0 | 1 |
y | 30px | 0px |
duration | — | 0.6s |
viewport.once | — | true |
once: true flag means the animation plays only on the first scroll-into-view and does not repeat if the user scrolls back up. Pass a delay prop (in seconds) to offset the start time when multiple cards appear in a grid, which creates a natural cascade effect.
Hover behavior
The card uses CSS group-hover utilities applied to a parent wrapper div rather than JavaScript event handlers, keeping the interaction performant:
| Element | Default state | Hover state |
|---|
| Main card | translateX(0) translateY(0) | translateX(-1px) translateY(-1px) |
| Offset shadow div | translateX(+2px) translateY(+2px) | translateX(+3px) translateY(+3px) |
| CTA text and icon | text-teal-600 | text-magenta |
| CTA arrow icon | translateX(0) | translateX(+8px) |
Layout
The component renders a two-layer structure. The back layer is a solid bg-teal-900 rounded-2xl div offset by translate-x-2 translate-y-2 using Tailwind utilities — this becomes the drop shadow. The front layer sits on top as the main card surface, providing the .marbled-paper background, border, and all content. A semi-transparent magenta radial blur in the top-right corner of the card shifts from magenta to cyan on hover for an extra splash of color.
Example usage
<MarbledCard
title="Redesigning the checkout flow"
excerpt="How we reduced cart abandonment by 40% through progressive disclosure."
category="UX Research"
delay={0.2}
/>
delay by 0.1 to 0.2 seconds per card to produce a staggered entrance. For example, a three-card row might use delay={0}, delay={0.15}, and delay={0.3}.