lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
47 lines • 1.84 kB
TypeScript
import React from "react";
/**
* InfiniteDrift Component
* A high-performance, professional Three.js powered image drifting gallery.
* Features multiple bands with independent speeds, rotations, and curvatures.
*/
export interface InfiniteDriftBand {
/** Array of image URLs for this band */
images: string[];
/** Scrolling speed multiplier for this band (default: 1.0) */
speed?: number;
/** Rotation angle in degrees (default: 0) */
rotation?: number;
/** Vertical offset from center (default: 0) */
offsetY?: number;
/** Curvature intensity (default: 40.0) */
curveAmount?: number;
/** Direction of curvature (1 for convex, -1 for concave) */
curveDirection?: 1 | -1;
/** Rotation pivot point type */
rotationType?: "fromLeft" | "fromCenter";
}
export interface InfiniteDriftProps {
/** Configuration for each horizontal band */
bands?: InfiniteDriftBand[];
/** Height of the component (default: 600px) */
height?: string | number;
/** Gap between images in a band (default: 20) */
gap?: number;
/** Height of individual images (default: 100) */
imageHeight?: number;
/** Height of each band container (default: 120) */
bandHeight?: number;
/** Maximum width an image can take while maintaining ratio (default: 300) */
maxImageWidth?: number;
/** Scrolling inertia/friction (0 to 1, default: 0.92) */
inertia?: number;
/** Whether to preserve original image aspect ratios (default: true) */
preserveOriginalRatios?: boolean;
/** Additional CSS classes */
className?: string;
/** Overlay children (e.g., text or controls) */
children?: React.ReactNode;
}
export declare const InfiniteDrift: React.FC<InfiniteDriftProps>;
export default InfiniteDrift;
//# sourceMappingURL=infinite-drift.d.ts.map