Aki UI

Image Trail

イメージトレイル

Frames dropped along the path of the pointer, fading out behind it. They are placed by distance travelled rather than by mouse event — events fire at whatever rate the pointer reports, which would clump the trail when you move slowly and thin it out when you move fast. Each frame clears itself after its lifetime, so nothing accumulates. Built with Framer Motion AnimatePresence↗↗ and Tailwind CSS.

Sweep across

Installation

Install the following dependencies:1

npm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { AnimatePresence, motion } from "framer-motion"

import { useRef, useState, type ReactNode } from "react"

type ImageTrailProps = {

items: ReactNode[],

spacing?: number,

life?: number,

size?: number,

How to use it3

"use client"

import { ImageTrail } from "@/components/ui/image-trail"

const items = [

<img key="a" src="/a.jpg" alt="" />,

<img key="b" src="/b.jpg" alt="" />,

]

export default function Page() {

Props

ImageTrail

Name	Default	Description
items	—	ReactNode[] Frames cycled through as the trail is drawn
spacing	90	number Pixels the pointer must travel before the next frame drops
life	700	number Milliseconds a frame stays before it is cleared
size	110	number Width and height of a frame in pixels
height	320	number Height of the tracked area in pixels
dark	false	boolean Render the dark palette