Lumise

A stacked image gallery where photos start in black and white and reveal full color on hover. The hovered image scales to XL while neighbors shift to large — creating a natural focus hierarchy. Built for team showcases, portfolios, and storytelling sections that need to feel alive.

Features

• Black and white to full color reveal on hover

• Hovered image scales to XL size smoothly

• Neighboring images scale to large for a natural hierarchy

• Non-hovered images stay grayscale for visual depth and focus

• Smooth stacked layout with configurable sizing

• Responsive — desktop, tablet and mobile optimized

• Easy image swap, size, color and transition customization

• No external dependencies

Property Controls

Content — image array with swap support

Sizing — XL hover size, large neighbor size, default size

Animation — transition speed, scale easing, color reveal timing

Colors — grayscale filter intensity, background color

Technical Details

• CSS filter for grayscale to color transition

• CSS transform scale for three-tier size hierarchy

• React useState for hover index tracking

• Neighbor detection for large scale assignment

• Responsive breakpoints for all screen sizes

• Smooth transitions via CSS cubic-bezier easing

Use Cases

Team introductions · Portfolio highlights · Product showcases · Agency websites · Landing page storytelling · Photography collections · Brand campaigns

SEO Keywords

framer stacked gallery · framer hover effect · framer color reveal · framer image gallery · framer interactive gallery · framer grayscale hover · framer team showcase · framer portfolio component · framer image hover · framer focus effect · framer photo stack · framer gallery component · framer image reveal · framer code component · framer photography grid