Image Ticker

v1.0.0

FreeGalleryInteractiveReduced Motion

A gorgeous, cinematic dual-ticker displaying rows of images rotating in opposite directions with built-in lightbox functionality.

Image Ticker

Go fullscreen to customize props

Installation

npx vectorvesper add image-ticker

Run npx vectorvesper init once first to set up your project.

Dependencies

npm install framer-motion

framer-motion

Usage

Import

import ImageTicker from "@/components/vv/image-ticker/ImageTicker";

Usage

<ImageTicker />

Client-only component — disable SSR

This component requires browser APIs and must be rendered client-side only.

import dynamic from "next/dynamic";

const ImageTicker = dynamic(
  () => import("@/components/vv/image-ticker/ImageTicker"),
  { ssr: false }
);

This component respects prefers-reduced-motion and provides a graceful fallback.

Props

A premium dual-strip infinite image ticker with perspective rotations, micro-interactions, and a built-in lightbox viewer. Hovering pauses the scroll; clicking cards launches a luxurious animated overlay with ambient backglow. Includes ImageTicker, SmoothTicker, and LightboxOverlay.

<ImageTicker />

The main overlay layout wrapping two rotated infinite tickers and a title overlay.

Prop	Type	Default	Description
`topImages*`	`string[]`	`—`	Array of image URLs for the top ticker strip.
`bottomImages*`	`string[]`	`—`	Array of image URLs for the bottom ticker strip.
`topRotation`	`number`	`35`	Skew/rotation angle in degrees for the top ticker.
`bottomRotation`	`number`	`-35`	Skew/rotation angle in degrees for the bottom ticker.
`backgroundColor`	`string`	`"#030303"`	Fallback background color of the container.
`height`	`string`	`"100vh"`	CSS height string of the parent viewport wrapper.
`title`	`string`	`—`	Big overlay text displayed center-stage on top of the strips.
`titlePosition`	`"left" \| "right" \| "center"`	`"right"`	Alignment of the overlay title.
`showAmbientGlow`	`boolean`	`true`	Enables a colored radial glow orb in the background.
`showNoiseGrain`	`boolean`	`true`	Enables an organic film-grain overlay animation.
`showVignette`	`boolean`	`true`	Enables dark vignette gradients on the viewport edges.
`enableLightbox`	`boolean`	`true`	Enables the fullscreen LightboxOverlay on card clicks.
`titleFontFamily`	`string`	`"'Bebas Neue', sans-serif"`	Font family of the overlay title.
`titleFontSize`	`string`	`"clamp(2rem, 4vw, 6rem)"`	CSS font size of the overlay title.
`titleColor`	`string`	`"rgba(255, 255, 255, 0.95)"`	Text color of the overlay title.
`titleOffset`	`string`	`"8vw"`	Horizontal margin/offset spacing for left/right title alignments.
`ambientGlowColor`	`string`	`"rgba(127,140,255,0.06)"`	Color of the background ambient glow orb.
`onImageClick`	`(src: string) => void`	`—`	Callback fired when an image card is clicked.
`className`	`string`	`—`	Extra CSS class names for the outer wrapper container.
`tickerProps`	`Partial<SmoothTickerProps>`	`{}`	Configuration overrides forwarded to both ticker strips.
`lightboxProps`	`Partial<LightboxOverlayProps>`	`{}`	Configuration overrides forwarded to the lightbox component.

<SmoothTicker />

A standalone horizontal infinite scroll strip with custom card animations (sweep shine, hover lift).

Prop	Type	Default	Description
`images*`	`string[]`	`—`	Array of image URLs to tile.
`direction`	`1 \| -1`	`1`	Scroll direction: 1 (left-to-right) or -1 (right-to-left).
`cardWidth`	`number`	`170`	Width of individual cards in px.
`cardHeight`	`number`	`200`	Height of individual cards in px.
`gap`	`number`	`20`	Gap spacing between cards in px.
`speed`	`number`	`0.05`	Scrolling speed multiplier.
`pauseOnHover`	`boolean`	`true`	Pauses ticker scrolling when hovering anywhere inside the strip.
`showHoverGlow`	`boolean`	`true`	Adds a subtle border glow to the hovered card.
`showShineSweep`	`boolean`	`true`	Triggers a metallic diagonal shine sweep when mouse enters a card.
`showGradientBorder`	`boolean`	`true`	Displays a high-end glassmorphic border gradient on the cards.
`onCardClick`	`(src: string) => void`	`—`	Callback fired when a card in the strip is clicked.
`cardBorderRadius`	`number`	`14`	Corner radius of individual image cards in px.
`containerBorderRadius`	`number`	`30`	Corner radius of the strip container frame in px.
`containerHeight`	`number`	`230`	Height of the strip container in px.
`containerBackground`	`string`	`"#060608"`	Background color of the strip container track.
`cardBackground`	`string`	`"#0a0a0e"`	Background fallback color of individual image cards.
`className`	`string`	`—`	Extra CSS class names for the strip container.

<LightboxOverlay />

A react-dom portal-rendered lightbox modal with spring entrance, backdrop blur, close hint, and ambient backglow.

Prop	Type	Default	Description
`src*`	`string \| null`	`—`	The image URL to display. Modal opens when truthy, closes when null.
`onClose*`	`() => void`	`—`	Callback fired when the backdrop, close button, or ESC key is clicked.
`imageWidth`	`string`	`"420px"`	Width of the active image frame (CSS length).
`imageHeight`	`string`	`"540px"`	Height of the active image frame (CSS length).
`backdropBlur`	`string`	`"24px"`	CSS backdrop-filter blur amount for the overlay.
`showAmbientGlow`	`boolean`	`true`	Paints a colorful ambient shadow halo matching the image's edges.
`borderRadius`	`string`	`"24px"`	Border radius of the active image frame (CSS length).
`overlayColor`	`string`	`"rgba(3,3,3,0.8)"`	Background color of the fullscreen backdrop overlay.
`closeHintText`	`string`	`"Click anywhere to close"`	Instructional hint text shown below the image.
`showCloseHint`	`boolean`	`true`	Show or hide the close instruction hint text.
`className`	`string`	`—`	Extra CSS classes applied to the portal container.

Examples

Double-strip rotated marquee

const pics = ["/img1.jpg", "/img2.jpg", "/img3.jpg", "/img4.jpg"];

<ImageTicker
  topImages={pics}
  bottomImages={pics}
  title="PORTFOLIO"
/>

Standalone horizontal stripClean, flat ticker strip scrolling right-to-left.

<SmoothTicker
  images={["/1.jpg", "/2.jpg", "/3.jpg"]}
  direction={-1}
  speed={0.08}
  cardWidth={200}
  cardHeight={250}
/>

Client component suite. Relies on Framer Motion's useAnimationFrame and React Portals for lightbox overlays.

Automatically stops auto-scrolling animations and bypasses entry spring transitions if the system preference for reduced motion is active.

Source

"use client";
import { motion } from "framer-motion";
import { useState } from "react";
import LightboxOverlay from "./LightboxOverlay";
import SmoothTicker from "./SmoothTicker";

import type { LightboxOverlayProps } from "./LightboxOverlay";
import type { SmoothTickerProps } from "./SmoothTicker";

export type ImageTickerProps = {
  topImages: string[];
  bottomImages: string[];
  topRotation?: number;
  bottomRotation?: number;
  backgroundColor?: string;
  height?: string;
  title?: string;
  titleFontFamily?: string;
  titleFontSize?: string;
  titleColor?: string;
  titlePosition?: "left" | "right" | "center";
  titleOffset?: string;
  showAmbientGlow?: boolean;
  ambientGlowColor?: string;
  showNoiseGrain?: boolean;
  showVignette?: boolean;
  enableLightbox?: boolean;
  onImageClick?: (src: string) => void;
  tickerProps?: Partial<
    Omit<SmoothTickerProps, "images" | "direction" | "onCardClick">
  >;
  lightboxProps?: Partial<Omit<LightboxOverlayProps, "src" | "onClose">>;
  className?: string;
};

const ImageTicker = ({
  topImages,
  bottomImages,
  topRotation = 35,
  bottomRotation = -35,
  backgroundColor = "#030303",
  height = "100vh",
  title,
  titleFontFamily = "'Bebas Neue', sans-serif",
  titleFontSize = "clamp(2rem, 4vw, 6rem)",
  titleColor = "rgba(255, 255, 255, 0.95)",
  titlePosition = "right",
  titleOffset = "8vw",
  showAmbientGlow = true,
  ambientGlowColor = "rgba(127,140,255,0.06)",

View on GitHub →Report an issue