52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Tfb2,"use client"; import { useEffect, useRef } from "react"; import { useReducedMotion } from "../../internals/motion/media-query"; import { cn } from "../../utils"; import { variantMap, type ImageTrailVariant, type VariantType } from "./trail-variants"; /** * ImageTrailCursor - Cursor-following image trail with 9 animation variants. * * The trail images are rendered by React; the motion is driven imperatively by * a variant class that owns its own pointer listeners, rAF loop and GSAP * timelines. Only the variant switch tears that instance down and rebuilds it, * which is what the Svelte `$effect` tracks. */ export interface ImageTrailCursorProps { images?: string[]; variant?: VariantType; className?: string; } /** * Clears the inline styles GSAP wrote on the trail elements so a newly * constructed variant starts from the stylesheet's own values. The inner * element's `background-image` is written by the render, not by GSAP, so it is * restored after the wipe. */ function resetImageStyles(container: HTMLDivElement) { const imgEls = container.querySelectorAll(".content__img"); for (const el of imgEls) { el.style.cssText = ""; // reveal variants add fragment children; drop any left behind for (const frag of el.querySelectorAll(".content__img-frag")) frag.remove(); const inner = el.querySelector(".content__img-inner"); if (inner) { // Preserve background-image set by the render, only clear GSAP residue const bgImage = inner.style.backgroundImage; inner.style.cssText = ""; if (bgImage) inner.style.backgroundImage = bgImage; } } } export function ImageTrailCursor({ images = [], variant = "type1", className = "", }: ImageTrailCursorProps) { const containerRef = useRef(null); const instanceRef = useRef(null); // Live, not just read at mount: flipping the OS setting mid-session starts // or stops the trail without remounting the component. const reduced = useReducedMotion(); // `variant` and the reduced-motion preference are the only dependencies, // exactly as on the Svelte side: a changed `images` array adds or removes // trail elements without rebuilding the running instance (which keeps the // element list it captured at construction). Reproduced rather than // corrected — the Svelte behaviour is the contract. Under reduced motion no // instance exists at all: no pointer listeners, no rAF loop, no timelines, // and the trail images stay hidden. useEffect(() => { const container = containerRef.current; if (!container || reduced) return; if (instanceRef.current) { instanceRef.current.destroy(); instanceRef.current = null; } resetImageStyles(container); const Variant = variantMap[variant] || variantMap.type1; instanceRef.current = new Variant(container); return () => { if (instanceRef.current) { instanceRef.current.destroy(); instanceRef.current = null; } // Wipe what the instance wrote, so a trail stopped by the // preference leaves no frozen image on screen. resetImageStyles(container); }; }, [variant, reduced]); return (

{images.map((image, i) => ( // Keyed on `variant + i` like the Svelte `{#each}`: switching // variant remounts every trail element, so no GSAP-written // inline style survives the switch.

))}

); } 55:Ta4ed,"use client"; import { gsap } from "gsap"; // ============================================================================= // Types // ============================================================================= export type VariantType = | "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated" | "scale" | "fall" | "gravity" | "flame" | "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split"; export interface ImageTrailVariant { destroy(): void; } // ============================================================================= // Helpers // ============================================================================= function lerp(a: number, b: number, n: number): number { return (1 - n) * a + n * b; } function getLocalPointerPos(e: MouseEvent | TouchEvent, rect: DOMRect): { x: number; y: number } { let clientX = 0; let clientY = 0; if ("touches" in e && e.touches.length > 0) { // Non-null: guarded by `e.touches.length > 0` on this same line. const touch = e.touches[0]!; clientX = touch.clientX; clientY = touch.clientY; } else if ("clientX" in e) { clientX = e.clientX; clientY = e.clientY; } return { x: clientX - rect.left, y: clientY - rect.top, }; } function getMouseDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number { const dx = p1.x - p2.x; const dy = p1.y - p2.y; return Math.hypot(dx, dy); } function getNewPosition(position: number, offset: number, arr: ImageItem[]) { const realOffset = Math.abs(offset) % arr.length; if (position - realOffset >= 0) { return position - realOffset; } else { return arr.length - (realOffset - position); } } // ============================================================================= // ImageItem // ============================================================================= export class ImageItem { public DOM: { el: HTMLDivElement; inner: HTMLDivElement | null } = { el: null as unknown as HTMLDivElement, inner: null, }; // `private`, not `public`: the animation library declares `TweenVars` inside a // GLOBAL namespace with no module-level export, so a public `gsap.TweenVars` // member emits a bare `gsap.` reference into the shipped .d.ts while tsc drops // the value-only `import { gsap }` — deep-importing consumers then hit TS2503 // "Cannot find namespace 'gsap'". A private member emits no type at all, and it // is read only by initEvents() below, so nothing outside this class loses access. private defaultStyle: gsap.TweenVars = { scale: 1, x: 0, y: 0, opacity: 0 }; public rect: DOMRect | null = null; private resizeHandler: (() => void) | null = null; constructor(DOM_el: HTMLDivElement) { this.DOM.el = DOM_el; this.DOM.inner = this.DOM.el.querySelector(".content__img-inner"); this.getRect(); this.initEvents(); } private initEvents() { this.resizeHandler = () => { gsap.set(this.DOM.el, this.defaultStyle); this.getRect(); }; window.addEventListener("resize", this.resizeHandler); } private getRect() { this.rect = this.DOM.el.getBoundingClientRect(); } destroy() { if (this.resizeHandler) { window.removeEventListener("resize", this.resizeHandler); this.resizeHandler = null; } } } // ============================================================================= // Base class for shared variant logic // ============================================================================= abstract class BaseVariant implements ImageTrailVariant { protected container: HTMLDivElement; protected DOM: { el: HTMLDivElement }; protected images: ImageItem[]; protected imagesTotal: number; protected imgPosition: number; protected zIndexVal: number; protected activeImagesCount: number; protected isIdle: boolean; protected mousePos: { x: number; y: number }; protected lastMousePos: { x: number; y: number }; protected cacheMousePos: { x: number; y: number }; protected touchActive = false; private positionHistory: { x: number; y: number; t: number }[] = []; private static readonly HISTORY_MAX_AGE = 100; // ms private static readonly HISTORY_MAX_LEN = 5; private rafId: number | null = null; private rafStarted = false; private destroyed = false; private handlePointerMove: ((ev: MouseEvent | TouchEvent) => void) | null = null; private initRender: ((ev: MouseEvent | TouchEvent) => void) | null = null; private handleTouchStart: ((ev: TouchEvent) => void) | null = null; private handleTouchEnd: ((ev: TouchEvent) => void) | null = null; constructor(container: HTMLDivElement) { this.container = container; this.DOM = { el: container }; this.images = [...container.querySelectorAll(".content__img")].map( (img) => new ImageItem(img as HTMLDivElement) ); this.imagesTotal = this.images.length; this.imgPosition = 0; this.zIndexVal = 1; this.activeImagesCount = 0; this.isIdle = true; this.mousePos = { x: 0, y: 0 }; this.lastMousePos = { x: 0, y: 0 }; this.cacheMousePos = { x: 0, y: 0 }; this.handlePointerMove = (ev: MouseEvent | TouchEvent) => { const rect = this.container.getBoundingClientRect(); this.mousePos = getLocalPointerPos(ev, rect); if (this.touchActive) { this.pushPositionHistory(this.mousePos.x, this.mousePos.y); } }; container.addEventListener("mousemove", this.handlePointerMove); container.addEventListener("touchmove", this.handlePointerMove, { passive: true }); this.initRender = (ev: MouseEvent | TouchEvent) => { const rect = this.container.getBoundingClientRect(); this.mousePos = getLocalPointerPos(ev, rect); this.cacheMousePos = { ...this.mousePos }; this.startRafLoop(); container.removeEventListener("mousemove", this.initRender as EventListener); container.removeEventListener("touchmove", this.initRender as EventListener); }; container.addEventListener("mousemove", this.initRender as EventListener); container.addEventListener("touchmove", this.initRender as EventListener, { passive: true }); // Touch lifecycle handlers this.handleTouchStart = (ev: TouchEvent) => { this.touchActive = true; const rect = this.container.getBoundingClientRect(); const pos = getLocalPointerPos(ev, rect); this.mousePos = pos; this.cacheMousePos = { ...pos }; this.lastMousePos = { ...pos }; this.positionHistory = []; this.pushPositionHistory(pos.x, pos.y); this.startRafLoop(); }; container.addEventListener("touchstart", this.handleTouchStart, { passive: true }); this.handleTouchEnd = () => { this.touchActive = false; this.lastMousePos = { ...this.mousePos }; this.cacheMousePos = { ...this.mousePos }; this.positionHistory = []; }; container.addEventListener("touchend", this.handleTouchEnd); container.addEventListener("touchcancel", this.handleTouchEnd); } private startRafLoop() { if (this.rafStarted) return; // Nothing to animate when the container holds no trail elements: leaving the // loop unstarted keeps an empty trail (`images` defaults to `[]`) from // rescheduling a requestAnimationFrame every frame until unmount. if (this.imagesTotal === 0) return; this.rafStarted = true; // Remove initRender listeners since we're starting the loop if (this.initRender) { this.container.removeEventListener("mousemove", this.initRender as EventListener); this.container.removeEventListener("touchmove", this.initRender as EventListener); } this.rafId = requestAnimationFrame(() => this.render()); } private pushPositionHistory(x: number, y: number) { const now = performance.now(); this.positionHistory.push({ x, y, t: now }); // Trim by age and length const cutoff = now - BaseVariant.HISTORY_MAX_AGE; while ( this.positionHistory.length > BaseVariant.HISTORY_MAX_LEN || // Non-null: `length > 1` on this same clause proves index 0 exists. (this.positionHistory.length > 1 && this.positionHistory[0]!.t < cutoff) ) { this.positionHistory.shift(); } } protected getTouchVelocity(): { dx: number; dy: number } { if (!this.touchActive || this.positionHistory.length < 2) { // Mouse fallback: same as original behavior return { dx: this.mousePos.x - this.cacheMousePos.x, dy: this.mousePos.y - this.cacheMousePos.y, }; } // Cumulative displacement over the buffer let dx = 0; let dy = 0; for (let i = 1; i < this.positionHistory.length; i++) { // Non-null: `i < length` and `i - 1 >= 0` keep both indices in bounds. dx += this.positionHistory[i]!.x - this.positionHistory[i - 1]!.x; dy += this.positionHistory[i]!.y - this.positionHistory[i - 1]!.y; } return { dx, dy }; } protected get threshold(): number { return this.touchActive ? 40 : 80; } protected render() { if (this.destroyed) return; const distance = getMouseDistance(this.mousePos, this.lastMousePos); this.updateCache(); if (distance > this.threshold) { this.showNextImage(); this.lastMousePos = { ...this.mousePos }; } if (this.isIdle && this.zIndexVal !== 1) { this.zIndexVal = 1; } this.rafId = requestAnimationFrame(() => this.render()); } protected updateCache() { this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1); this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1); } protected abstract showNextImage(): void; /** Advance to the next image in the ring. */ protected nextImage(): ImageItem | undefined { this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; return this.images[this.imgPosition]; } protected onImageActivated() { this.activeImagesCount++; this.isIdle = false; } protected onImageDeactivated() { this.activeImagesCount--; if (this.activeImagesCount === 0) { this.isIdle = true; } } destroy() { this.destroyed = true; if (this.rafId !== null) { cancelAnimationFrame(this.rafId); this.rafId = null; } if (this.handlePointerMove) { this.container.removeEventListener("mousemove", this.handlePointerMove); this.container.removeEventListener("touchmove", this.handlePointerMove); } if (this.initRender) { this.container.removeEventListener("mousemove", this.initRender as EventListener); this.container.removeEventListener("touchmove", this.initRender as EventListener); } if (this.handleTouchStart) { this.container.removeEventListener("touchstart", this.handleTouchStart); } if (this.handleTouchEnd) { this.container.removeEventListener("touchend", this.handleTouchEnd); this.container.removeEventListener("touchcancel", this.handleTouchEnd); } this.positionHistory = []; for (const img of this.images) { gsap.killTweensOf(img.DOM.el); if (img.DOM.inner) gsap.killTweensOf(img.DOM.inner); img.destroy(); } } } // ============================================================================= // Variant 1 — Basic fade & scale trail // ============================================================================= export class ImageTrailVariant1 extends BaseVariant { protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, scale: 1, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.4, ease: "power1", x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "power3", opacity: 0, scale: 0.2, }, 0.4 ); } } // ============================================================================= // Variant 2 — Scale-up with brightness burst // ============================================================================= export class ImageTrailVariant2 extends BaseVariant { protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, scale: 0, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.4, ease: "power1", scale: 1, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .fromTo( img.DOM.inner, { scale: 2.8, filter: "brightness(250%)" }, { duration: 0.4, ease: "power1", scale: 1, filter: "brightness(100%)", }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "power2", opacity: 0, scale: 0.2, }, 0.45 ); } } // ============================================================================= // Variant 3 — Float-up exit with random x drift // ============================================================================= export class ImageTrailVariant3 extends BaseVariant { protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, scale: 0, zIndex: this.zIndexVal, xPercent: 0, yPercent: 0, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.4, ease: "power1", scale: 1, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .fromTo( img.DOM.inner, { scale: 1.2 }, { duration: 0.4, ease: "power1", scale: 1, }, 0 ) .to( img.DOM.el, { duration: 0.6, ease: "power2", opacity: 0, scale: 0.2, xPercent: () => gsap.utils.random(-30, 30), yPercent: -200, }, 0.6 ); } } // ============================================================================= // Variant 4 — Momentum-based drift with brightness/contrast // ============================================================================= export class ImageTrailVariant4 extends BaseVariant { protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); const vel = this.getTouchVelocity(); let dx = vel.dx; let dy = vel.dy; const distance = Math.sqrt(dx * dx + dy * dy); if (distance !== 0) { dx /= distance; dy /= distance; } dx *= distance / 100; dy *= distance / 100; gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, scale: 0, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.4, ease: "power1", scale: 1, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .fromTo( img.DOM.inner, { scale: 2, filter: `brightness(${Math.max((400 * distance) / 100, 100)}%) contrast(${Math.max( (400 * distance) / 100, 100 )}%)`, }, { duration: 0.4, ease: "power1", scale: 1, filter: "brightness(100%) contrast(100%)", }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "power3", opacity: 0, }, 0.4 ) .to( img.DOM.el, { duration: 1.5, ease: "power4", x: `+=${dx * 110}`, y: `+=${dy * 110}`, }, 0.05 ); } } // ============================================================================= // Variant 5 — Rotation + momentum fling // ============================================================================= export class ImageTrailVariant5 extends BaseVariant { private lastAngle = 0; protected showNextImage() { const vel = this.getTouchVelocity(); let dx = vel.dx; let dy = vel.dy; let angle = Math.atan2(dy, dx) * (180 / Math.PI); if (angle < 0) angle += 360; if (angle > 90 && angle <= 270) angle += 180; const isMovingClockwise = angle >= this.lastAngle; this.lastAngle = angle; const startAngle = isMovingClockwise ? angle - 10 : angle + 10; const distance = Math.sqrt(dx * dx + dy * dy); if (distance !== 0) { dx /= distance; dy /= distance; } dx *= distance / 150; dy *= distance / 150; ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, filter: "brightness(80%)", scale: 0.1, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, rotation: startAngle, }, { duration: 1, ease: "power2", scale: 1, filter: "brightness(100%)", x: this.mousePos.x - (img.rect?.width ?? 0) / 2 + dx * 70, y: this.mousePos.y - (img.rect?.height ?? 0) / 2 + dy * 70, rotation: this.lastAngle, }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "expo", opacity: 0, }, 0.5 ) .to( img.DOM.el, { duration: 1.5, ease: "power4", x: `+=${dx * 120}`, y: `+=${dy * 120}`, }, 0.05 ); } } // ============================================================================= // Variant 6 — Speed-reactive size, blur, grayscale // ============================================================================= export class ImageTrailVariant6 extends BaseVariant { protected override updateCache() { this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.3); this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.3); } private mapSpeedToSize(speed: number, minSize: number, maxSize: number) { const maxSpeed = 200; return minSize + (maxSize - minSize) * Math.min(speed / maxSpeed, 1); } private mapSpeedToBrightness(speed: number, minB: number, maxB: number) { const maxSpeed = 70; return minB + (maxB - minB) * Math.min(speed / maxSpeed, 1); } private mapSpeedToBlur(speed: number, minBlur: number, maxBlur: number) { const maxSpeed = 90; return minBlur + (maxBlur - minBlur) * Math.min(speed / maxSpeed, 1); } private mapSpeedToGrayscale(speed: number, minG: number, maxG: number) { const maxSpeed = 90; return minG + (maxG - minG) * Math.min(speed / maxSpeed, 1); } protected showNextImage() { const vel = this.getTouchVelocity(); const speed = Math.sqrt(vel.dx * vel.dx + vel.dy * vel.dy); ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; const scaleFactor = this.mapSpeedToSize(speed, 0.3, 2); const brightnessValue = this.mapSpeedToBrightness(speed, 0, 1.3); const blurValue = this.mapSpeedToBlur(speed, 20, 0); const grayscaleValue = this.mapSpeedToGrayscale(speed, 600, 0); gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { opacity: 1, scale: 0, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.8, ease: "power3", scale: scaleFactor, filter: `grayscale(${grayscaleValue * 100}%) brightness(${ brightnessValue * 100 }%) blur(${blurValue}px)`, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .fromTo( img.DOM.inner, { scale: 2 }, { duration: 0.8, ease: "power3", scale: 1, }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "power3.in", opacity: 0, scale: 0.2, }, 0.45 ); } } // ============================================================================= // Variant 7 — Stacking trail with visible queue // ============================================================================= export class ImageTrailVariant7 extends BaseVariant { private visibleImagesCount: number; private visibleImagesTotal: number; constructor(container: HTMLDivElement) { super(container); this.visibleImagesCount = 0; this.visibleImagesTotal = 9; this.visibleImagesTotal = Math.min(this.visibleImagesTotal, this.imagesTotal - 1); } protected override updateCache() { this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.3); this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.3); } protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; ++this.visibleImagesCount; gsap.killTweensOf(img.DOM.el); const scaleValue = gsap.utils.random(0.5, 1.6); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .fromTo( img.DOM.el, { scale: scaleValue - Math.max(gsap.utils.random(0.2, 0.6), 0), rotationZ: 0, opacity: 1, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, }, { duration: 0.4, ease: "power3", scale: scaleValue, rotationZ: gsap.utils.random(-3, 3), x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ); if (this.visibleImagesCount >= this.visibleImagesTotal) { const lastInQueue = getNewPosition(this.imgPosition, this.visibleImagesTotal, this.images); // Non-null: the `img` guard above proves `images` is non-empty, and // getNewPosition() returns a value in [0, images.length) for a non-empty // array, so this index is populated. const oldImg = this.images[lastInQueue]!; gsap.to(oldImg.DOM.el, { duration: 0.4, ease: "power4", opacity: 0, scale: 1.3, onComplete: () => { if (this.activeImagesCount === 0) { this.isIdle = true; } }, }); } } } // ============================================================================= // Variant 8 — 3D perspective based on cursor position // ============================================================================= export class ImageTrailVariant8 extends BaseVariant { private rotation: { x: number; y: number }; private cachedRotation: { x: number; y: number }; private zValue: number; private cachedZValue: number; constructor(container: HTMLDivElement) { super(container); this.rotation = { x: 0, y: 0 }; this.cachedRotation = { x: 0, y: 0 }; this.zValue = 0; this.cachedZValue = 0; } protected showNextImage() { const rect = this.container.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; const relX = this.mousePos.x - centerX; const relY = this.mousePos.y - centerY; this.rotation.x = -(relY / centerY) * 30; this.rotation.y = (relX / centerX) * 30; this.cachedRotation = { ...this.rotation }; const distanceFromCenter = Math.sqrt(relX * relX + relY * relY); const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY); const proportion = distanceFromCenter / maxDistance; this.zValue = proportion * 1200 - 600; this.cachedZValue = this.zValue; const normalizedZ = (this.zValue + 600) / 1200; const brightness = 0.2 + normalizedZ * 2.3; ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(this.DOM.el, { perspective: 1000 }, 0) .fromTo( img.DOM.el, { opacity: 1, z: 0, scale: 1 + this.cachedZValue / 1000, zIndex: this.zIndexVal, x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2, y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2, rotationX: this.cachedRotation.x, rotationY: this.cachedRotation.y, filter: `brightness(${brightness})`, }, { duration: 1, ease: "expo", scale: 1 + this.zValue / 1000, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, rotationX: this.rotation.x, rotationY: this.rotation.y, }, 0 ) .to( img.DOM.el, { duration: 0.4, ease: "power2", opacity: 0, z: -800, }, 0.3 ); } } // ============================================================================= // Variant Pixelated — hard-snap pop-in/pop-out, pixelated + bordered images // ============================================================================= export class ImageTrailVariantPixelated extends BaseVariant { private static readonly HOLD = 0.15; // seconds the image stays visible before snapping out constructor(container: HTMLDivElement) { super(container); for (const img of this.images) { img.DOM.el.style.imageRendering = "pixelated"; img.DOM.el.style.border = "2px solid #191308"; } } protected showNextImage() { ++this.zIndexVal; this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0; // Guard, not an assertion: `images` is built from the container's // `.content__img` children, so an empty container leaves this index // unpopulated — the invariant needed for `!` does not hold here. const img = this.images[this.imgPosition]; if (!img) return; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set( img.DOM.el, { opacity: 1, scale: 1, zIndex: this.zIndexVal, x: this.mousePos.x - (img.rect?.width ?? 0) / 2, y: this.mousePos.y - (img.rect?.height ?? 0) / 2, }, 0 ) .set(img.DOM.el, { opacity: 0, scale: 0.2 }, ImageTrailVariantPixelated.HOLD); } } // ============================================================================= // Shared helpers for the physical and reveal variants // ============================================================================= function randomBetween(min: number, max: number): number { return min + Math.random() * (max - min); } // ============================================================================= // Variant Scale — pops in with a bouncy scale, then shrinks away behind the cursor // ============================================================================= export class ImageTrailVariantScale extends BaseVariant { protected showNextImage() { ++this.zIndexVal; const img = this.nextImage(); if (!img) return; const w = img.rect?.width ?? 0; const h = img.rect?.height ?? 0; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(img.DOM.el, { opacity: 1, scale: 0, rotation: randomBetween(-20, 20), zIndex: this.zIndexVal, x: this.mousePos.x - w / 2, y: this.mousePos.y - h / 2, }) .to(img.DOM.el, { scale: 1, duration: 0.6, ease: "back.out(2)" }, 0) .to(img.DOM.el, { scale: 0, duration: 0.6, ease: "power2.in" }, 0.75) .set(img.DOM.el, { opacity: 0 }); } } // ============================================================================= // Variant Fall — springs in, spins, and drops out through the bottom // ============================================================================= export class ImageTrailVariantFall extends BaseVariant { protected showNextImage() { ++this.zIndexVal; const img = this.nextImage(); if (!img) return; const w = img.rect?.width ?? 0; const h = img.rect?.height ?? 0; const floor = this.container.getBoundingClientRect().height; gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(img.DOM.el, { opacity: 1, scale: 0, rotation: 0, zIndex: this.zIndexVal, x: this.mousePos.x - w / 2, y: this.mousePos.y - h / 2, }) .to(img.DOM.el, { scale: 1, duration: 0.8, ease: "elastic.out(1, 0.3)" }, 0) .to(img.DOM.el, { rotation: randomBetween(-360, 360), duration: 1.1, ease: "power1.out" }, 0) // all the way past the bottom edge, gathering speed .to(img.DOM.el, { y: floor * 1.2 + h, duration: 1, ease: "back.in(0.4)" }, 0) .set(img.DOM.el, { opacity: 0 }); } } // ============================================================================= // Variant Gravity — cascades from the cursor, lands on the bottom edge, bounces // ============================================================================= export class ImageTrailVariantGravity extends BaseVariant { protected showNextImage() { ++this.zIndexVal; const img = this.nextImage(); if (!img) return; const w = img.rect?.width ?? 0; const h = img.rect?.height ?? 0; const height = this.container.getBoundingClientRect().height; const startY = this.mousePos.y - h / 2; const floorY = Math.max(startY, height - h); const drop = floorY - startY; // thrown sideways by the pointer, capped so nothing flies off const push = Math.max(-140, Math.min(140, (this.mousePos.x - this.lastMousePos.x) * 1.4)); const fall = 0.3 + 0.35 * Math.sqrt(drop / Math.max(1, height)); const bounce = drop * 0.32; gsap.killTweensOf(img.DOM.el); const el = img.DOM.el; gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(el, { opacity: 1, scale: 0, rotation: randomBetween(-10, 10), zIndex: this.zIndexVal, x: this.mousePos.x - w / 2, y: startY, }) .to(el, { scale: 1, duration: 0.4, ease: "elastic.out(2, 0.6)" }, 0) // drifting sideways the whole way down and across the bounces .to( el, { x: `+=${push}`, rotation: randomBetween(-30, 30), duration: fall + 0.9, ease: "power1.out", }, 0.1 ) // the fall and two bounces that lose height each time .to(el, { y: floorY, duration: fall, ease: "power2.in" }, 0.15) .to(el, { y: floorY - bounce, duration: 0.28, ease: "power2.out" }) .to(el, { y: floorY, duration: 0.28, ease: "power2.in" }) .to(el, { y: floorY - bounce * 0.3, duration: 0.16, ease: "power2.out" }) .to(el, { y: floorY, duration: 0.16, ease: "power2.in" }) .to(el, { opacity: 0, scale: 0.7, duration: 0.3, ease: "power2.in" }, "+=0.15"); } } // ============================================================================= // Variant Flame — flickers up; the faster the pointer, the wilder the tilt // ============================================================================= export class ImageTrailVariantFlame extends BaseVariant { protected showNextImage() { ++this.zIndexVal; const img = this.nextImage(); if (!img) return; const w = img.rect?.width ?? 0; const h = img.rect?.height ?? 0; const { dx, dy } = this.getTouchVelocity(); const speed = Math.min(1, Math.hypot(dx, dy) / 160); const rotation = (Math.random() - 0.5) * 30 * (1 + speed * 2); gsap.killTweensOf(img.DOM.el); gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(img.DOM.el, { opacity: 1, scale: 0, rotation, zIndex: this.zIndexVal, x: this.mousePos.x - w / 2, y: this.mousePos.y - h / 2, }) .to(img.DOM.el, { scale: 1, duration: 0.35, ease: "back.out(1.6)" }, 0) // then it rises and burns away, like a flame .to( img.DOM.el, { y: `-=${40 + speed * 40}`, scale: 0, opacity: 0, rotation: rotation * 1.6, duration: 0.55, ease: "power2.in", }, 0.55 ); } } // ============================================================================= // Reveal variants — the image opens from fragments, then closes again // ============================================================================= export type RevealPattern = "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split"; export interface RevealFragment { /** clip-path while hidden */ closed: string; /** clip-path once revealed */ open: string; /** 0 (first) … 1 (last): when the fragment opens within the stagger */ order: number; } /** Neighbouring fragments overlap by this much (%), or anti-aliasing leaves hairlines at the seams. */ const SEAM = 0.6; const lo = (n: number) => Math.max(0, n - SEAM); const hi = (n: number) => Math.min(100, n + SEAM); const pc = (n: number) => `${Math.round(n * 100) / 100}%`; const poly = (pts: [number, number][]) => `polygon(${pts.map(([x, y]) => `${pc(x)} ${pc(y)}`).join(", ")})`; /** * The fragments of each reveal, as clip-paths in the image's own box. * `closed` and `open` always have the same shape and point count, so the * tween between them is a straight interpolation. */ export function revealFragments(pattern: RevealPattern): RevealFragment[] { switch (pattern) { case "venetian": { // horizontal slats, each dropping open from its top edge, top to bottom const n = 6; return Array.from({ length: n }, (_, i) => { const y0 = lo((i * 100) / n); const y1 = hi(((i + 1) * 100) / n); return { closed: poly([ [0, y0], [100, y0], [100, y0], [0, y0], ]), open: poly([ [0, y0], [100, y0], [100, y1], [0, y1], ]), order: i / (n - 1), }; }); } case "curtain": { // vertical strips opening from their centre line, middle strips first const n = 6; const mid = (n - 1) / 2; return Array.from({ length: n }, (_, i) => { const x0 = lo((i * 100) / n); const x1 = hi(((i + 1) * 100) / n); const cx = (x0 + x1) / 2; return { closed: poly([ [cx, 0], [cx, 0], [cx, 100], [cx, 100], ]), open: poly([ [x0, 0], [x1, 0], [x1, 100], [x0, 100], ]), order: Math.abs(i - mid) / mid, }; }); } case "hexagon": { // a 3×3 honeycomb, each cell growing from its centre, centre cell first const centres = [16.67, 50, 83.33]; const r = 31; // circumradius wide enough that the cells overlap and cover the box const cells: RevealFragment[] = []; for (const cy of centres) { for (const cx of centres) { const hex: [number, number][] = Array.from({ length: 6 }, (_, k) => { const a = (Math.PI / 3) * k + Math.PI / 6; return [cx + r * Math.cos(a), cy + r * Math.sin(a)]; }); cells.push({ closed: poly(hex.map(() => [cx, cy] as [number, number])), open: poly(hex), order: Math.hypot(cx - 50, cy - 50) / Math.hypot(33.33, 33.33), }); } } return cells; } case "liquid": { // blobs of different sizes swelling out and merging const blobs: [number, number, number][] = [ [50, 50, 48], [22, 26, 36], [80, 24, 36], [26, 80, 36], [78, 78, 38], ]; return blobs.map(([x, y, r], i) => ({ closed: `circle(0% at ${pc(x)} ${pc(y)})`, open: `circle(${pc(r)} at ${pc(x)} ${pc(y)})`, order: i / (blobs.length - 1), })); } case "zoom-split": { // four quadrants flying out of the centre point const quads: [number, number][] = [ [0, 0], [50, 0], [0, 50], [50, 50], ]; return quads.map(([x, y], i) => ({ closed: poly([ [50, 50], [50, 50], [50, 50], [50, 50], ]), open: poly([ [lo(x), lo(y)], [hi(x + 50), lo(y)], [hi(x + 50), hi(y + 50)], [lo(x), hi(y + 50)], ]), order: i / 3, })); } } } const FRAG_CLASS = "content__img-frag"; export class ImageTrailVariantReveal extends BaseVariant { private static readonly STAGGER = 0.22; // seconds from first to last fragment private readonly fragments: RevealFragment[]; constructor(container: HTMLDivElement, pattern: RevealPattern) { super(container); this.fragments = revealFragments(pattern); for (const img of this.images) { const bg = img.DOM.inner?.style.backgroundImage ?? ""; for (const f of this.fragments) { const frag = document.createElement("div"); frag.className = FRAG_CLASS; frag.style.cssText = `position:absolute;inset:0;background-image:${bg};background-size:cover;background-position:center;clip-path:${f.closed};`; img.DOM.el.appendChild(frag); } // the fragments are the picture now if (img.DOM.inner) img.DOM.inner.style.opacity = "0"; } } protected showNextImage() { ++this.zIndexVal; const img = this.nextImage(); if (!img) return; const w = img.rect?.width ?? 0; const h = img.rect?.height ?? 0; const frags = [...img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`)]; const stagger = ImageTrailVariantReveal.STAGGER; gsap.killTweensOf([img.DOM.el, ...frags]); const tl = gsap .timeline({ onStart: () => this.onImageActivated(), onComplete: () => this.onImageDeactivated(), }) .set(img.DOM.el, { opacity: 1, scale: 0.85, rotation: 0, zIndex: this.zIndexVal, x: this.mousePos.x - w / 2, y: this.mousePos.y - h / 2, }) .to(img.DOM.el, { scale: 1, duration: 0.5, ease: "power3.out" }, 0); frags.forEach((frag, i) => { const f = this.fragments[i]!; tl.fromTo( frag, { clipPath: f.closed }, { clipPath: f.open, duration: 0.45, ease: "power3.out" }, f.order * stagger ); // and closes in reverse order tl.to( frag, { clipPath: f.closed, duration: 0.35, ease: "power3.in" }, 0.95 + (1 - f.order) * stagger ); }); tl.set(img.DOM.el, { opacity: 0 }); } override destroy() { for (const img of this.images) { const frags = img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`); gsap.killTweensOf([...frags]); frags.forEach((f) => f.remove()); if (img.DOM.inner) img.DOM.inner.style.opacity = ""; } super.destroy(); } } function revealVariant(pattern: RevealPattern) { return class extends ImageTrailVariantReveal { constructor(container: HTMLDivElement) { super(container, pattern); } }; } // ============================================================================= // Variant Map // ============================================================================= export const variantMap: Record ImageTrailVariant> = { type1: ImageTrailVariant1, type2: ImageTrailVariant2, type3: ImageTrailVariant3, type4: ImageTrailVariant4, type5: ImageTrailVariant5, type6: ImageTrailVariant6, type7: ImageTrailVariant7, type8: ImageTrailVariant8, pixelated: ImageTrailVariantPixelated, scale: ImageTrailVariantScale, fall: ImageTrailVariantFall, gravity: ImageTrailVariantGravity, flame: ImageTrailVariantFlame, venetian: revealVariant("venetian"), curtain: revealVariant("curtain"), hexagon: revealVariant("hexagon"), liquid: revealVariant("liquid"), "zoom-split": revealVariant("zoom-split"), }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap@^3.14.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap@^3.14.2"}]]}]}]]}],["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/image-trail-cursor/ImageTrailCursor.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/image-trail-cursor/ImageTrailCursor.tsx"},{"path":"react/src/components/image-trail-cursor/index.ts","content":"\"use client\";\n\nexport { ImageTrailCursor } from \"./ImageTrailCursor\";\nexport type { ImageTrailCursorProps } from \"./ImageTrailCursor\";\nexport type { VariantType } from \"./trail-variants\";\n","type":"registry:ui","target":"@ui/fancy/components/image-trail-cursor/index.ts"},{"path":"react/src/components/image-trail-cursor/trail-variants.ts","content":"$55","type":"registry:ui","target":"@ui/fancy/components/image-trail-cursor/trail-variants.ts"}],"className":"h-[70svh] min-h-80"}]]}]