FrameGrid

FrameGrid is a 3x3 capability grid for Framer where hovering any tile expands it across multiple rows and columns while playing your video underneath, with decorative corner and…

FrameGrid is a 3x3 capability grid for Framer where hovering any tile expands it across multiple rows and columns while playing your video underneath, with decorative corner and edge frame textures on every tile. Each tile starts as an italic label, a service, skill, or category name, then crossfades to video or image on hover as the tile grows. Neighboring tiles compress to make room, then settle back when you move away. WHAT IT DOES Add up to 9 items, each with a label and an optional video or image. Hovering any tile expands it to span 1, 2, or 3 rows and columns, fading the label out and the media in, video plays only while hovered to save bandwidth. Optional corner and edge frame textures overlay the tile for a gallery feel. KEY FEATURES Explicit 3x3 grid with configurable hover-expand span, 1 to 3 cells Real video playback on hover, muted and looped, pauses when not active Label-to-media crossfade on every tile, not just a static swap Decorative corner and edge frame textures, fully optional Per-tile media scale for fine-tuned cropping and zoom Adjustable transition, border, radius, and placeholder color Full typography control for tile labels Graceful fallback for tiles without media Static-safe rendering for the Framer canvas and thumbnails Zero third-party dependencies beyond Framer Motion WHY IT WORKS Most hover-expand grids only handle images or generic content. FrameGrid is built around video, so a capability grid or service list can play real motion the moment someone hovers, not just a static enlarge. PERFECT FOR Agency capability sections, service and skills grids, studio showreels organized by category, and any Framer site presenting a compact set of video-backed offerings. WHAT'S INCLUDED A single drop-in component. Add up to 9 items with label and media, then tune span size, transitions, borders, and frame textures through property controls. Drop it in, load your media, and let the grid do the expanding.

Framed img video grid hover expand