From 8a715cd5c3e61bc56018278d9a03bd7959a68c2d Mon Sep 17 00:00:00 2001 From: AlacrisDevs Date: Sat, 2 May 2026 18:32:07 +0300 Subject: [PATCH] Added logo animation --- public/letters/A.svg | 3 + public/letters/I.svg | 3 + public/letters/L.svg | 3 + public/letters/N.svg | 3 + public/letters/P.svg | 3 + public/letters/T.svg | 7 +++ public/tipilan-dark.svg | 29 +++------ public/tipilan-icon-white.svg | 12 ++-- src/app/globals.css | 33 ++++++++++ src/components/AnimatedTipilanLogo.tsx | 84 ++++++++++++++++++++++++++ src/components/HeroSection.tsx | 13 ++-- 11 files changed, 159 insertions(+), 34 deletions(-) create mode 100644 public/letters/A.svg create mode 100644 public/letters/I.svg create mode 100644 public/letters/L.svg create mode 100644 public/letters/N.svg create mode 100644 public/letters/P.svg create mode 100644 public/letters/T.svg create mode 100644 src/components/AnimatedTipilanLogo.tsx diff --git a/public/letters/A.svg b/public/letters/A.svg new file mode 100644 index 0000000..de850cb --- /dev/null +++ b/public/letters/A.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/letters/I.svg b/public/letters/I.svg new file mode 100644 index 0000000..7e1eb43 --- /dev/null +++ b/public/letters/I.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/letters/L.svg b/public/letters/L.svg new file mode 100644 index 0000000..9222d8f --- /dev/null +++ b/public/letters/L.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/letters/N.svg b/public/letters/N.svg new file mode 100644 index 0000000..b1f8039 --- /dev/null +++ b/public/letters/N.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/letters/P.svg b/public/letters/P.svg new file mode 100644 index 0000000..eed1d53 --- /dev/null +++ b/public/letters/P.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/letters/T.svg b/public/letters/T.svg new file mode 100644 index 0000000..4166d8a --- /dev/null +++ b/public/letters/T.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/tipilan-dark.svg b/public/tipilan-dark.svg index 3fc82fb..a9da727 100644 --- a/public/tipilan-dark.svg +++ b/public/tipilan-dark.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/public/tipilan-icon-white.svg b/public/tipilan-icon-white.svg index 8c1c759..04468f6 100644 --- a/public/tipilan-icon-white.svg +++ b/public/tipilan-icon-white.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index 748ffc4..9dc9a20 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -135,3 +135,36 @@ body { .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24; } + +.tipilan-logo-letter { + animation: tipilan-logo-letter-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: var(--tipilan-logo-letter-delay, 0ms); + opacity: 0; + transform: translate3d(0, 100%, 0); + will-change: opacity, transform; +} + +@keyframes tipilan-logo-letter-in { + 0% { + opacity: 0; + transform: translate3d(0, 100%, 0); + } + + 70% { + opacity: 1; + } + + 100% { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@media (prefers-reduced-motion: reduce) { + .tipilan-logo-letter { + animation: none; + opacity: 1; + transform: none; + will-change: auto; + } +} diff --git a/src/components/AnimatedTipilanLogo.tsx b/src/components/AnimatedTipilanLogo.tsx new file mode 100644 index 0000000..de91ffb --- /dev/null +++ b/src/components/AnimatedTipilanLogo.tsx @@ -0,0 +1,84 @@ +"use client"; + +import Image from "next/image"; +import type { AnimationEvent, CSSProperties } from "react"; +import { useEffect, useState } from "react"; + +const LOGO_WIDTH = 2092; +const LOGO_HEIGHT = 300; + +const logoLetters = [ + { letter: "T", src: "/letters/T.svg", x: 0, width: 367 }, + { letter: "I", src: "/letters/I.svg", x: 334.858, width: 178 }, + { letter: "P", src: "/letters/P.svg", x: 481.258, width: 411 }, + { letter: "I", src: "/letters/I.svg", x: 872.218, width: 178 }, + { letter: "L", src: "/letters/L.svg", x: 1018.64, width: 286 }, + { letter: "A", src: "/letters/A.svg", x: 1289.2, width: 390 }, + { letter: "N", src: "/letters/N.svg", x: 1690.72, width: 402 }, +] as const; + +export default function AnimatedTipilanLogo() { + const [isAnimationComplete, setIsAnimationComplete] = useState(false); + + useEffect(() => { + if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { + setIsAnimationComplete(true); + } + }, []); + + if (isAnimationComplete) { + return ( + + ); + } + + return ( +
+ {logoLetters.map((letter, index) => { + const isLastLetter = index === logoLetters.length - 1; + + return ( + ) => { + if (event.animationName === "tipilan-logo-letter-in") { + setIsAnimationComplete(true); + } + } + : undefined + } + style={ + { + left: `${(letter.x / LOGO_WIDTH) * 100}%`, + width: `${(letter.width / LOGO_WIDTH) * 100}%`, + zIndex: logoLetters.length - index, + "--tipilan-logo-letter-delay": `${index * 90}ms`, + } as CSSProperties + } + /> + ); + })} +
+ ); +} diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx index a9bb7f0..e6254f7 100644 --- a/src/components/HeroSection.tsx +++ b/src/components/HeroSection.tsx @@ -1,5 +1,6 @@ import Image from "next/image"; import { Link } from "@/i18n/routing"; +import AnimatedTipilanLogo from "@/components/AnimatedTipilanLogo"; import { vipnagorgialla } from "@/components/Vipnagorgialla"; import { useTranslations } from "next-intl"; @@ -23,14 +24,8 @@ export default function HeroSection() {
{/* Left: logo + info + CTA */}
- TipiLAN Logo -
+ +

{t("hero.date")}

@@ -40,7 +35,7 @@ export default function HeroSection() {
{t("hero.buyTicket")}