mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

chore: release v1.2.6 with Next.js LCP, Hydration and Prod-Visibility fixes
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 42s
Details
Build & Deploy / 🧪 QA (push) Successful in 5m17s
Details
Build & Deploy / 🏗️ Build (push) Successful in 8m36s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 17s
Details
Build & Deploy / 🧪 Smoke Test (push) Successful in 53s
Details
Build & Deploy / ⚡ Lighthouse (push) Successful in 7m38s
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-21 13:26:14 +01:00
parent 85bc03b9d2
commit 927ce977f2
16 changed files with 372 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/Scribble.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
import { cn } from '@/components/ui';
interface ScribbleProps {
@@ -11,67 +10,49 @@ interface ScribbleProps {
}
export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
const pathVariants: Variants = {
hidden: { pathLength: 0, opacity: 0 },
visible: {
pathLength: 1,
opacity: 1,
transition: {
duration: 1.8,
ease: 'easeInOut',
},
},
};
if (variant === 'circle') {
return (
<LazyMotion strict features={domAnimation}>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="0 0 800 350"
preserveAspectRatio="none"
>
<m.path
variants={pathVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
strokeLinejoin="miter"
fillOpacity="0"
strokeMiterlimit="4"
stroke={color}
strokeOpacity="1"
strokeWidth="20"
d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
/>
</svg>
</LazyMotion>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="0 0 800 350"
preserveAspectRatio="none"
>
<path
className="animate-draw-stroke"
pathLength="1"
style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
strokeLinejoin="miter"
fillOpacity="0"
strokeMiterlimit="4"
stroke={color}
strokeOpacity="1"
strokeWidth="20"
d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
/>
</svg>
);
}
if (variant === 'underline') {
return (
<LazyMotion strict features={domAnimation}>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="-400 -55 730 60"
preserveAspectRatio="none"
>
<m.path
variants={pathVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15"
stroke={color}
strokeWidth="20"
fill="none"
/>
</svg>
</LazyMotion>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="-400 -55 730 60"
preserveAspectRatio="none"
>
<path
className="animate-draw-stroke"
pathLength="1"
style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15"
stroke={color}
strokeWidth="20"
fill="none"
/>
</svg>
);
}