Image Trail Various Elements Demo

1import Image from "next/image"
2 
3import ImageTrail,{
4  ImageTrailItem,
5} from "@/components/fancy/image/image-trail"
6 
7const ImageTrailVariousElementsDemo = () => {
8  return (
9    <div className="w-dvw h-dvh bg-white relative text-foreground dark:text-muted">
10      <ImageTrail
11        threshold={60}
12        keyframes={{ opacity: [0, 1, 1, 0], scale: [1, 1, 0] }}
13        keyframesOptions={{
14          opacity: { duration: 1, times: [0, 0.001, 0.9, 1] },
15          scale: { duration: 1, times: [0, 0.8, 1] },
16        }}
17      >
18        <ImageTrailItem>
19          <div className="w-20 sm:w-28 aspect-square relative overflow-hidden bg-orange-500">
20            <Image
21              src={
22                "https://images.unsplash.com/photo-1727341554370-80e0fe9ad082?q=80&w=2276&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
23              }
24              alt=""
25              fill
26              className="object-cover"
27            />
28          </div>
29        </ImageTrailItem>
30        <ImageTrailItem>
31          <div className="w-16 sm:w-20">
32            <svg
33              className="w-full h-full"
34              viewBox="0 0 107 243"
35              fill="none"
36              xmlns="http://www.w3.org/2000/svg"
37            >
38              <path
39// … truncated