Banner Full Bleed Animated Outline

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner28.tsx instead.

Usage

The file also exports banner28Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner28, banner28Demo } from "@/components/blocks/banner/banner28";

export default function Page() {
  return <Banner28 {...banner28Demo} />;
}

Props

Behavior notes

• The outline is a 1px padding layer with a moving background-position keyframe, scoped inside the component's own style tag with a component-prefixed class name so it can't collide with another block's animation on the same page.
• The animation only changes background-position, which the browser can run on the compositor thread without triggering layout or paint on every frame, and it never touches React state or causes a re-render.
• A prefers-reduced-motion media query inside the same style tag turns the animation off entirely, leaving a static gradient outline for users with motion sensitivity.
• This is a plain server component with no client-side JavaScript at all; the shimmer is CSS-only, so there's nothing to hydrate.

Frequently asked questions