Focus Blur Image Carousel

Installation & details

Focus Blur Image Carousel by Kedhareswer Naidu. 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, them

React · Tailwind CSS · Author permission · Original registry

Added to PODIE 2026-10-07 · Catalog updated 2026-10-07 · Page updated 2026-10-13

Installation and usage

The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.

01 — Set up your project

First component? Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the component

pnpm dlx shadcn@latest add https://podie.dev/r/kedhareswer--focus-pull-carousel.json

03 — Add it to your interface

Import the component from the path created by the installer.

'use client';
import EffectFocusPullCarousel from '@/components/podie/kedhareswer--focus-pull-carousel/demo';
export default function Example() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EffectFocusPullCarousel />
    </div>
  );
}

Example styling

These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.

.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }

Dependencies and distribution

clsx, tailwind-merge The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.

By Kedhareswer Naidu · Author permission. Original component source and license included.