Editorial Focus Card

One card, two moods — flip between

Focus Card — an editorial cover that pulls into focus Focus Card is a code component that turns a simple portrait card into a two-act story. In its resting state, it reads like a magazine cover — a bold color panel, kicker, title, issue meta, and body copy sitting beside a portrait. Click it, and the whole thing morphs: the panel floods into a full-bleed background, the portrait pushes in and darkens, a cropped strip reveals a close-up detail, and a large typographic wordmark fades in with a justified poem beneath it. One click back, and it returns to the cover. Every transition is handled with smooth, orchestrated motion — no jump cuts, no layout shift — so it feels like one continuous camera move rather than two separate screens. Fully customizable, no code required: Swap in your own portrait image Toggle black & white or full color Set independent colors for the cover panel and the focus background Adjust the reveal strip's position, size, zoom, and crop offset Independent font, size, and color controls for the title, kicker, issue label, date label, body text, poem, and wordmark Adjustable corner radius Great for: Portfolio and case-study cards Editorial or magazine-style landing pages Team/about pages with a memorable reveal Any place a static card feels like it's missing a story Drop it into any Framer project, connect your content, and it just works.

One card, two moods — flip between