Spectra Frame — React Component

Zero-dependency interactive image grid — photos start in black & white and burst into full color on hover with adaptive scale. Built-in responsive columns, scoped CSS injection, and picsum placeholder defaults.

Cardshovergallerygridimagesgrayscalehovercolorphotoportfoliocss-animationresponsive

Spectra Frame

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

imageCount

Number of images to render (slices the array).

gap

Grid gap in px.

columns

Column count on desktop (≥901px). Auto-reduces to 3 on tablet, 2 on mobile.

aspectRatio

CSS aspect-ratio per cell.

transitionSpeed

Transition duration in ms.

scaleAmount

Scale multiplier on the hovered image.

colorRevealTiming

CSS easing for all transitions.

backgroundColor

Grid background color.

Generated JSX

Copy this into your page.

<SpectraFrame
  imageCount={12}
  gap={10}
  columns={4}
  aspectRatio="4/3"
  transitionSpeed={480}
  scaleAmount={1.08}
  colorRevealTiming="cubic-bezier(0.4,0,0.2,1)"
  backgroundColor="#09090b"
/>

Animation effects

hover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Spectra Frame

Spectra Frame is a responsive image grid where photos are desaturated to black and white by default and burst into full color on hover with an adaptive scale animation. The color reveal uses CSS filter transitions without any JavaScript per-frame work. The component has zero external dependencies and uses scoped CSS injection, with picsum placeholder images by default. Responsive columns adapt to container width, making it suitable for any grid layout within a Next.js page.

Common use cases

Photography portfolio galleries
Product and brand photo showcases
Creative agency portfolio grids
Visual product feature galleries