Skip to content

component

EditorialCards

By Helen Statsevich

Details

Summary

Interactive editorial cards moving in

Description

Editorial Cards is an interactive Framer code component that creates a layered editorial-style card experience with progressive reveal, hover motion, drag interaction, and flexible card positioning. It is built for layouts where cards should feel tactile and alive rather than static. Cards can either start already visible on the canvas or appear partially from outside the frame, inviting interaction. Outside cards first peek in , then fully reveal on click , creating a staged storytelling effect. Key features Progressive reveal interaction Cards can enter one by one instead of appearing all at once. Peek-from-edge behavior Cards can start outside the canvas and peek in from any side. Click to reveal Peeking cards expand into their full placed position when clicked. Custom card layout Set individual card position, rotation, stacking order, and start behavior. Hover motion Revealed cards can lift and scale slightly on hover for a more premium feel. Drag support Cards can be dragged, making the composition feel tactile and dynamic. Focus through dimming Non-hovered cards can fade back while the active card gets visual priority. Canvas-based workflow Connect your own Framer layers/components directly into the card slots. Controls included Layout Settings For each card, you can control: Start Location — on canvas or outside X Position (%) Y Position (%) Rotation Peek From — left, right, top, bottom Z-Index Animation Animation Duration Hover Hover Lift Hover Scale Focus Dim Others Dim Opacity Best for This component works best when you want a layout to feel: editorial layered cinematic tactile less template-like more art-directed and interactive Notes Works with connected Framer component instances through the Children / Cards slot. Best results come from using cards with varied sizes, image treatments, and slight rotation differences. Ideal for hero sections and showcase blocks where visual rhythm matters.

Introduction

Interactive editorial cards moving in

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100114458/148/228/309/79/15
  • All · #1232