---
title: "Spectra Frame — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Galleries. Color reveal image grid with hover zoom"
canonical: "https://framer.elliotli.dev/component/spectra-frame"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Spectra Frame

# Spectra Frame

Color reveal image grid with hover zoom

[View on Framer](https://framer.com/marketplace/components/spectra-frame/?via=elliot-li)

![Spectra Frame preview image 1](https://framer.elliotli.dev/og/component/spectra-frame/86bac11db650346b/1600x1200.jpg)

## Summary

Color reveal image grid with hover zoom

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #8234

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-08-14
- **Updated**: 2026-04-16
- **Added**: 2025-08-10
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery