add text logo

2026-05-03 18:08:10 +02:00
parent 8c8e6e172a
commit 04ac84732d
3 changed files with 127 additions and 1 deletions
@@ -1,7 +1,7 @@
 {
 	"name": "@avocadi/ui",
 	"type": "module",
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"description": "ui elements for avocadi",
 	"private": false,
 	"files": [
@@ -4,3 +4,10 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
+export function getRandomInt(min: number, max: number) {
+	const ceiledMin = Math.ceil(min);
+	const flooredMax = Math.floor(max);
+
+	return Math.floor(Math.random() * (flooredMax - ceiledMin) + ceiledMin);
+}
@@ -0,0 +1,119 @@
+"use client";
+
+import { stagger, type Transition } from "motion";
+import { motion, type Variants } from "motion/react";
+import type { FC } from "react";
+import { cn, getRandomInt } from "@/lib/utils";
+
+const variants: {
+	letter: Variants;
+	container: Variants;
+} = {
+	letter: {
+		enter: {
+			scale: 1,
+			y: 0,
+		},
+		from: { scale: 0, y: 200 },
+		hover: () => ({ scale: 1.1, rotate: getRandomInt(-10, 10) }),
+		active: { scale: 0.8 },
+	},
+	container: {
+		enter: {},
+		from: {},
+		hover: { transition: { delayChildren: stagger(0.01) } },
+	},
+};
+
+const letterTransition: Transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 10,
+	mass: 1,
+};
+
+export const LogoText: FC<{
+	color?: "primary" | "main" | "white";
+	animateOnGestures?: boolean;
+	animateOnMount?: boolean;
+}> = ({ color, animateOnGestures = false, animateOnMount = false }) => {
+	const letterCn = cn(
+		color === "primary"
+			? "fill-primary"
+			: color === "white"
+				? "fill-white"
+				: "fill-main",
+		"transition-colors",
+	);
+
+	return (
+		<motion.svg
+			variants={variants.container}
+			{...(animateOnMount && { animate: "enter", initial: "from" })}
+			transition={{
+				delayChildren: stagger(0.1, { from: "center" }),
+			}}
+			{...(animateOnGestures && { whileHover: "hover", whileTap: "active" })}
+			className="overflow-visible"
+			width="100%"
+			height="100%"
+			viewBox="0 0 988 327"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<title>Wortmarke</title>
+			<g>
+				<motion.path
+					transition={letterTransition}
+					variants={variants.letter}
+					d="M175.682 301.847L225.912 307.131L168.293 95.1121L100.351 87.9659L1.90605e-05 283.369L49.9882 288.627L66.2129 255.762L166.67 266.328L175.682 301.847ZM83.6638 220.574L124.876 136.886L134.096 137.856L156.945 228.281L83.6638 220.574Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M227.164 238.46L295.425 229.758L348.735 14.9731L298.271 21.4067L258.578 187.658L252.239 188.466L171.989 37.5062L121.771 43.9085L227.164 238.46Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M413.978 296.267C474.602 286.391 509.207 239.137 499.706 180.972C490.205 122.804 442.357 88.9818 381.732 98.8575C321.328 108.698 286.725 155.951 296.226 214.119C305.727 272.284 353.573 306.107 413.978 296.267ZM407.752 258.152C374.905 263.503 345.593 243.396 339.656 207.044C333.717 170.689 355.111 142.323 387.958 136.972C421.028 131.585 450.116 151.728 456.055 188.083C461.993 224.435 440.821 252.765 407.752 258.152Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M544.644 208.882C587.764 215.059 633.843 202.27 651.601 146.174L607.323 139.831C595.349 163.891 574.511 172.256 550.401 168.802C515.857 163.854 493.224 133.656 498.582 96.356C503.973 58.8222 534.16 36.4258 568.705 41.3739C592.814 44.8274 610.458 58.7044 615.21 84.9216L659.488 91.2639C658.203 32.6778 617.116 7.40381 574.462 1.29398C511.403 -7.7385 461.698 28.6474 452.913 89.8143C444.127 150.979 481.586 199.85 544.644 208.882Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M767.838 308.508L818.728 303.339L717.561 105.104L648.726 112.095L589.847 326.585L640.489 321.441L649.745 285.502L751.525 275.165L767.838 308.508ZM659.735 247.005L683.201 155.508L692.543 154.559L733.979 239.464L659.735 247.005Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M829.171 23.628L749.346 18.6378L738.461 192.228L818.286 197.218C885.703 201.433 913.691 165.631 916.788 116.242C919.885 66.8503 896.588 27.8425 829.171 23.628ZM820.255 162.486L781.79 160.081L788.735 55.9557L826.785 58.3343C860.494 60.4416 877.527 80.1776 875.428 113.656C873.329 147.133 853.963 164.593 820.255 162.486Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					d="M951.4 148.079L913.786 127.149L840.288 259.011L877.901 279.941L951.4 148.079Z"
+					className={letterCn}
+				/>
+				<motion.path
+					variants={variants.letter}
+					transition={letterTransition}
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M945.781 124.617L945.726 124.589C934.033 118.693 929.332 104.421 935.233 92.738C941.136 81.0524 955.419 76.3531 967.113 82.2495L988.295 92.9307L977.574 114.157C971.687 125.811 957.443 130.497 945.781 124.617Z"
+					className={letterCn}
+				/>
+			</g>
+		</motion.svg>
+	);
+};