---import "@/components/motion-blocks/image-trail-element.ts"; const images = [ "/images/trail-1.png", "/images/trail-2.png", "/images/trail-3.png"]; const config = { imageLifespan: 600, removalTickMs: 16, mouseThreshold: 40, minMovementForImage: 5, inDuration: 600, outDuration: 800, maxRotationFactor: 3, baseRotation: 30, speedSmoothingFactor: 0.25, minImageSize: 80, maxImageSize: 120, staggerOut: 40};--- <motion-image-trail images={images} config={config} class="w-full h-[600px]"/>
import "@/components/motion-blocks/image-trail-element.ts"; const images = [ "/images/trail-1.png", "/images/trail-2.png", "/images/trail-3.png"]; const config = { imageLifespan: 600, removalTickMs: 16, mouseThreshold: 40, minMovementForImage: 5, inDuration: 600, outDuration: 800, maxRotationFactor: 3, baseRotation: 30, speedSmoothingFactor: 0.25, minImageSize: 80, maxImageSize: 120, staggerOut: 40}; export default function Page() { return ( <motion-image-trail images={images} config={config} className="w-full h-[600px]" /> );}
<script setup>import "@/components/motion-blocks/image-trail-element.ts"; const images = [ "/images/trail-1.png", "/images/trail-2.png", "/images/trail-3.png"]; const config = { imageLifespan: 600, removalTickMs: 16, mouseThreshold: 40, minMovementForImage: 5, inDuration: 600, outDuration: 800, maxRotationFactor: 3, baseRotation: 30, speedSmoothingFactor: 0.25, minImageSize: 80, maxImageSize: 120, staggerOut: 40};</script> <template> <motion-image-trail :images="images" :config="config" class="w-full h-[600px]" /></template>
<script> import "@/components/motion-blocks/image-trail-element.ts"; const images = [ "/images/trail-1.png", "/images/trail-2.png", "/images/trail-3.png" ]; const config = { imageLifespan: 600, removalTickMs: 16, mouseThreshold: 40, minMovementForImage: 5, inDuration: 600, outDuration: 800, maxRotationFactor: 3, baseRotation: 30, speedSmoothingFactor: 0.25, minImageSize: 80, maxImageSize: 120, staggerOut: 40 };</script> <motion-image-trail images={images} config={config} class="w-full h-[600px]"/>
<script type="module" src="/components/motion-blocks/image-trail-element.js"></script> <motion-image-trail images='["/images/trail-1.png","/images/trail-2.png","/images/trail-3.png"]' config='{"imageLifespan":600,"removalTickMs":16,"mouseThreshold":40,"minMovementForImage":5,"inDuration":600,"outDuration":800,"maxRotationFactor":3,"baseRotation":30,"speedSmoothingFactor":0.25,"minImageSize":260,"maxImageSize":340,"staggerOut":40}' class="w-full h-[600px]"/>
