pqoqubbw

// useful links:
// custom easing by Lochie (x.com/lochieaxon): https://www.easing.dev
// motion-primitives by Ibelick (x.com/Ibelick): https://motion-primitives.com/docs
// The Magic of Clip Path article by Emil Kowalski (x.com/emilkowalski_): https://emilkowal.ski/ui/the-magic-of-clip-path

// we use same transition for every element to make it look consistent
const transition: Transition = {
  duration: 2.5,
  // custom easing from https://www.easing.dev
  ease: [0.175, 0.885, 0.32, 1],

pqoqubbw

<svg width="300" height="300" viewBox="0 0 300 300">
  <defs>
    <filter id="paperEffect">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.04"
        numOctaves="5"
        result="noise"
      />
      <feDiffuseLighting

pqoqubbw

"use client";

import { motion, Variants } from "framer-motion";

const pathVariants: Variants = {
  initial: { pathLength: 0, fillOpacity: 0 },
  animate: ({
    fillOpacity,
    delay,
  }: {