Focus Blur Image Carousel

Galleries 77

About

Focus blur image carousel for React: a camera-style focus pull where the centred photo is sharp while its neighbours blur, shrink and fade continuously as you scroll, swipe or drag. Native scroll snapping, keyboard, buttons and autoplay, theme-aware, reduced-motion aware. Use for galleries, portfolios and product photos.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Focus Blur Image Carousel to your project and fits it to your theme.

Code

How Focus Blur Image Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import FocusPullCarousel from "@/components/ui/focus-pull-carousel"

// Real landscape photography (Unsplash).
const U = (id: string) => "https://images.unsplash.com/photo-" + id + "?q=80&w=1800&auto=format&fit=crop"

export default function DemoPhotos() {
  return (
    <FocusPullCarousel background="#111110" ink="#f2efe8"
      slides={[
        { image: U("1506905925346-21bda4d32df4"), title: "Above the Clouds", caption: "Valais, Switzerland — sunrise at 3,100 m." },
        { image: U("1501785888041-af3ef285b470"), title: "Glass Lake", caption: "Lago di Braies, a rowboat at noon." },
        { image: U("1469474968028-56623f02e42e"), title: "Gold Valley", caption: "Late light pouring over the ridge." },
        { image: U("1464822759023-fed622ff2c3b"), title: "Snow Line", caption: "Pines, river flats and the high range." },
        { image: U("1500534314209-a25ddb2bd429"), title: "Blue Ridges", caption: "Seven layers of haze before dusk." },
        { image: U("1433086966358-54859d0ed716"), title: "Falls Bridge", caption: "Multnomah Falls after the rain." },
      ]}
    />
  )
}