Spectra Frame

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.

Installation

Spectra Frame

Shape the component before you copy it.

Animation effects