Card to article
ProStory cards that open into full articles with one seamless morph and shrink back into their exact slot when dragged down.
Live · keyboard ready
- Blogs, journals, and changelogs where each entry has a strong image.
- Case study and portfolio grids.
- Editorial landing sections that preview stories without leaving the page.
- Use a normal link to a page when articles are long or need their own URL and SEO.
- Use expandable-card for small inline details.
- Text only lists with no imagery.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { CardToArticle } from "@/components/arc/card-to-article/card-to-article"; const posts = [ { id: "glass-house", tag: "Case study", title: "A glass house that stays cool in August", meta: "5 min read", image: "/media/photos/pool-house.jpg", imageAlt: "A modern glass house beside a long pool", body: <p>The brief was simple and a little unreasonable...</p>, },]; export function Journal() { return <CardToArticle items={posts} />;}CardToArticle
A grid of story cards; a card opens into a full scrolling article with a shared element morph and closes back into its slot.
PropTypeDefaultDescription
itemsRequiredArticleItem[]–Each item has id, title, image, imageAlt, body, and optional tag and meta.valuestring | null–Id of the open article. Leave it out for uncontrolled use.defaultValuestring | nullnullInitially open article when uncontrolled.onValueChange(id: string | null) => void–Called when an article opens or closes.aspectRationumber4 / 3Ratio of the card and the article hero. They match, so the morph is a pure scale with no distortion.closeLabelstring"Close article"Accessible name of the close button.classNamestring–Extra class on the root.- EnterorSpace
- Opens the focused card.
- Escape
- Closes the article and returns focus to its card.
- Tab
- Stays inside the open article.
- Cards are buttons with aria-haspopup="dialog" and aria-expanded.
- The open article is a modal dialog labelled by its title, with focus moved to the close button and trapped inside.
- Closing returns focus to the card it came from.
- Page scroll is locked while the article is open, keeping the scrollbar's space so nothing shifts.
- The card itself becomes the article: its box and corners spring to the sheet while the hero scales as one piece, so image and title never distort.
- The body rises in after the morph; the close button pops in last.
- Drag down on touch, drag the hero with a mouse, or pull past the top with a trackpad: the sheet shrinks and drops with the gesture and closes past a threshold or on a flick.
- Closing re-measures the card's slot and lands flush in it, no bounce. A reading progress bar tracks the scroll.
- Reduced motion opens and closes without travel.
- Two columns, then one below 520px of container width.
- The article fills the screen with a 12px margin on phones and caps at 680px wide on desktop.
- Title and tag sizes follow the hero's own width through container units.
- The morph is one layout animation plus a scale corrected hero; nothing else re-lays out.
- The pull gesture is transform only and runs from motion values.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Keep every image the same ratio as aspectRatio so the hero scales cleanly.
- Titles are drawn on the photo in white over a legibility scrim; pick photos with calm lower areas.
- Use onValueChange to sync the open article with the URL for deep links.
The full library index for assistants is at /llms.txt.