Spectra Frame

An interactive image grid where photos start in black and white and burst into full color on hover — scaling up while surrounding images adapt to maintain the grid. Built for portfolios, photography showcases, brand storytelling, and creative agency websites.

Features

• Black and white to full color reveal on hover

• Hovered image scales up as the focal point

• Surrounding images resize smoothly to maintain grid layout

• Adaptive layout — no breaking, no overflow, no layout shift

• Responsive — desktop, tablet, and mobile optimized

• Smooth animations with configurable speed

• Customizable image count, spacing and colors

• No external dependencies

Property Controls

Content — image array with configurable count

Layout — spacing, gap, grid structure

Animation — hover transition speed, scale amount, color reveal timing

Colors — grayscale filter, background color

Technical Details

• CSS filter for grayscale to color transition

• CSS transform for scale animation on hover

• Adaptive grid recalculation on hover state change

• Responsive breakpoints for desktop, tablet, mobile

• React useState for hover index tracking

• Smooth transitions via CSS cubic-bezier easing

Use Cases

Photography portfolios · Creative agency sites · Brand storytelling · Editorial layouts · Image showcases · Visual narratives · Studio websites

SEO Keywords

framer image grid · framer hover effect · framer color reveal · framer interactive grid · framer photo gallery · framer grayscale hover · framer image hover effect · framer portfolio component · framer gallery component · framer zoom hover · interactive image framer · framer color transition · framer photography component · framer code component · framer image reveal