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

An scroll-driven lighttrail component built with ScrollX UI

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.

className - Optional class name for custom styling (default: "")
title - Optional title text displayed at the top of the component (default: "Mountains")
description - Optional description text displayed below the title (default: "Mountains are large...")
images - Optional array of image objects to display while scrolling (default: Array of 3 mountain images)
containerHeight - Optional height of the viewport container (default: "100%")
scrollHeight - Optional total scrollable height of the component (default: "200vh")