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.
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
Title, description, CTA text per card
Responsive image upload per card
Optional link per card (opens on click)
Expanded width (25–60%)
Border radius (0–32px)
Gap between cards (0–8px)
Content layout: Vertical or Horizontal
Inactive overlay
Active overlay (glassmorphism panel)
Title text
Description text
CTA button
Divider
Title size (20–64px)
Description size (10–22px)
Collapsed title size (12–28px)
Title font
Description font
CTA font
Speed: Fast, Medium, or Slow
Ken Burns zoom toggle
Stagger text toggle
Show/hide description
Show/hide CTA button
Show/hide accent divider
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
