Light Trail

A scroll-driven image showcase with animated progress indicator

Mountains

Mountains are large natural elevations of the earth's surface that rise prominently above their surroundings.

Mountain forest with sunlight through trees

Installation

npx scrollx-ui@latest add lighttrail

Usage Examples

Basic Usage

import { LightTrail } from "@/components/ui/light-trail";
 
const images = [
  {
    id: 1,
    src: "https://images.unsplash.com/photo-1561877202-53d0e24be55d?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3",
    alt: "Mountain forest with sunlight through trees",
  },
  {
    id: 2,
    src: "https://images.unsplash.com/photo-1627894485200-b92fb4353967?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3",
    alt: "Snowy mountain peaks at night with starry sky",
  },
  {
    id: 3,
    src: "https://images.unsplash.com/photo-1567601169793-64703dc5324a?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3",
    alt: "Dramatic mountain landscape with clouds",
  },
  // Add more images as needed
];

With Custom Title and Description

<div className="w-full" style={{ height: "600px" }}>
  <LightTrail
    title="Mountains"
    description="Mountains are large natural elevations of the earth's surface that rise prominently above their surroundings."
    images={images}
    containerHeight="100%"
    scrollHeight="200vh"
  />
</div>

API Reference

LightTrail

The LightTrail is a root component that creates a scroll-driven image showcase with animated transitions.

Props

PropertyTypeDefaultDescription
classNamestring""
Optional class for custom styling.
titlestring"Mountains"
Text displayed at the top of the component.
descriptionstring"Mountains are large..."
Text displayed below the title.
imagesArray<{ src: string; alt?: string }>3 default mountain images
Image objects displayed during scroll.
containerHeightstring"100%"
Height of the fixed scroll container.
scrollHeightstring"200vh"
Total scrollable height of the page section.

Built withby Ahdeetai.