From 04ac84732d43ba29fada26d70dce644ab7847c15 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Sun, 3 May 2026 18:08:10 +0200 Subject: [PATCH] add text logo --- package.json | 2 +- src/lib/utils.ts | 7 +++ src/logo/text.tsx | 119 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 src/logo/text.tsx diff --git a/package.json b/package.json index 06f4666..86e3cea 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/lib/utils.ts b/src/lib/utils.ts index ac680b3..3428839 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -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); +} diff --git a/src/logo/text.tsx b/src/logo/text.tsx new file mode 100644 index 0000000..a848f05 --- /dev/null +++ b/src/logo/text.tsx @@ -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 ( + + Wortmarke + + + + + + + + + + + + ); +};