About Category Accordion

What is Category Accordion?

Category Accordion is a premium hover-activated accordion component that transforms static category grids into dynamic, immersive browsing experiences. Each card expands on hover to reveal a glassmorphism content panel with title, description, and CTA — complete with smooth spring-based transitions and a subtle Ken Burns zoom. Ideal for photography portfolios, agency service pages, restaurant menus, real estate listings, and any layout that benefits from visual-first category navigation.

Core Features

Hover-driven accordion with configurable expanded width and smooth spring-curve transitions
Glassmorphism content panel with backdrop blur, staggered text entrance, and slide-fill CTA button
Ken Burns background zoom on the active card for cinematic depth
Vertical and horizontal content layout modes with toggleable accent divider
Full color system — six independent color controls including CTA button and divider
Independent font controls for title, description, and CTA with font picker integration

Controls inside Framer

Layout

Expanded width (25–60%)
Border radius (0–32px)
Gap between cards (0–8px)
Content layout: Vertical or Horizontal

Colors

Inactive overlay
Active overlay (glassmorphism panel)
Title text
Description text
CTA button
Divider

Typography

Title size (20–64px)
Description size (10–22px)
Collapsed title size (12–28px)
Title font
Description font
CTA font

Animation

Speed: Fast, Medium, or Slow
Ken Burns zoom toggle
Stagger text toggle

Toggles

Show/hide description
Show/hide CTA button
Show/hide accent divider

Best use cases

Photography and creative portfolios — showcase collections with visual-first navigation
Agency and studio service pages — present service categories with immersive hover reveals
Restaurant and hospitality menus — display cuisine types, room categories, or experiences
E-commerce category landing pages — drive exploration through visually rich category browsing

Every interaction is spring-animated and every color is customisable. Drop it in, connect your content, and ship a page that holds attention.