Category Accordion

What is 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 Categories Title, description, CTA text per card Responsive image upload per card Optional link per card (opens on click) 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. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Interactive accordion cards with hover.