diff --git a/public/sponsors/2fast-trimmed.png b/public/sponsors/2fast-trimmed.png new file mode 100644 index 0000000..9e81f10 Binary files /dev/null and b/public/sponsors/2fast-trimmed.png differ diff --git a/public/sponsors/2fast.png b/public/sponsors/2fast.png deleted file mode 100644 index f07d4af..0000000 Binary files a/public/sponsors/2fast.png and /dev/null differ diff --git a/public/sponsors/Artis_logo_white_text.png b/public/sponsors/Artis_logo_white_text.png index ce86a6d..0163835 100644 Binary files a/public/sponsors/Artis_logo_white_text.png and b/public/sponsors/Artis_logo_white_text.png differ diff --git a/public/sponsors/EGDA.png b/public/sponsors/EGDA.png index e830749..b842f47 100644 Binary files a/public/sponsors/EGDA.png and b/public/sponsors/EGDA.png differ diff --git a/public/sponsors/Global-productions.svg b/public/sponsors/Global-productions.svg index 1297096..cd0e4a9 100644 --- a/public/sponsors/Global-productions.svg +++ b/public/sponsors/Global-productions.svg @@ -1,80 +1,216 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sponsors/MANK.png b/public/sponsors/MANK.png deleted file mode 100644 index d01cff0..0000000 Binary files a/public/sponsors/MANK.png and /dev/null differ diff --git a/public/sponsors/Still_Frame_logo_2020_Gold_2.png b/public/sponsors/Still_Frame_logo_2020_Gold_2.png deleted file mode 100644 index b0876b4..0000000 Binary files a/public/sponsors/Still_Frame_logo_2020_Gold_2.png and /dev/null differ diff --git a/public/sponsors/Tallinna_Haridusamet_logo_RGB.svg b/public/sponsors/Tallinna_Haridusamet_logo_RGB.svg index ace2cde..b4ffbc3 100644 --- a/public/sponsors/Tallinna_Haridusamet_logo_RGB.svg +++ b/public/sponsors/Tallinna_Haridusamet_logo_RGB.svg @@ -1 +1,127 @@ -Tallinna_Haridusamet_logo_RGB \ No newline at end of file + + + + + + Tallinna_Haridusamet_logo_RGB + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sponsors/alecoq.svg b/public/sponsors/alecoq.svg index d40d5c6..2fe6e3d 100644 --- a/public/sponsors/alecoq.svg +++ b/public/sponsors/alecoq.svg @@ -1,17 +1,50 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/public/sponsors/arvutitark.svg b/public/sponsors/arvutitark.svg index 317f63c..ba5cd6c 100644 --- a/public/sponsors/arvutitark.svg +++ b/public/sponsors/arvutitark.svg @@ -1,11 +1,49 @@ - - - - - - - - - - + + + + + + + + + + + + diff --git a/public/sponsors/estonian-gamedev-guild-trimmed.png b/public/sponsors/estonian-gamedev-guild-trimmed.png new file mode 100644 index 0000000..346296c Binary files /dev/null and b/public/sponsors/estonian-gamedev-guild-trimmed.png differ diff --git a/public/sponsors/estonian_gamedev_guild.png b/public/sponsors/estonian_gamedev_guild.png deleted file mode 100644 index a79fb76..0000000 Binary files a/public/sponsors/estonian_gamedev_guild.png and /dev/null differ diff --git a/public/sponsors/k-space_ee-white.png b/public/sponsors/k-space_ee-white.png index 402ff78..19a4f9e 100644 Binary files a/public/sponsors/k-space_ee-white.png and b/public/sponsors/k-space_ee-white.png differ diff --git a/public/sponsors/mank-trimmed.png b/public/sponsors/mank-trimmed.png new file mode 100644 index 0000000..4e48b14 Binary files /dev/null and b/public/sponsors/mank-trimmed.png differ diff --git a/public/sponsors/nt.png b/public/sponsors/nt.png index 31c04da..18e2de9 100644 Binary files a/public/sponsors/nt.png and b/public/sponsors/nt.png differ diff --git a/public/sponsors/park_minigolf.png b/public/sponsors/park_minigolf.png index 9a0420e..229ee52 100644 Binary files a/public/sponsors/park_minigolf.png and b/public/sponsors/park_minigolf.png differ diff --git a/public/sponsors/poke-bowl.png b/public/sponsors/poke-bowl.png index b479c7d..ba70190 100644 Binary files a/public/sponsors/poke-bowl.png and b/public/sponsors/poke-bowl.png differ diff --git a/public/sponsors/redbull-wordmark-trimmed.png b/public/sponsors/redbull-wordmark-trimmed.png new file mode 100644 index 0000000..cea5694 Binary files /dev/null and b/public/sponsors/redbull-wordmark-trimmed.png differ diff --git a/public/sponsors/redbull-wordmark.png b/public/sponsors/redbull-wordmark.png deleted file mode 100644 index 7fab1d4..0000000 Binary files a/public/sponsors/redbull-wordmark.png and /dev/null differ diff --git a/public/sponsors/retro-burger.png b/public/sponsors/retro-burger.png index d36ad6f..f85a6c4 100644 Binary files a/public/sponsors/retro-burger.png and b/public/sponsors/retro-burger.png differ diff --git a/public/sponsors/still-frame-trimmed.png b/public/sponsors/still-frame-trimmed.png new file mode 100644 index 0000000..507721c Binary files /dev/null and b/public/sponsors/still-frame-trimmed.png differ diff --git a/public/sponsors/taltech-color.png b/public/sponsors/taltech-color.png index 4c21ce5..0b8bc2c 100644 Binary files a/public/sponsors/taltech-color.png and b/public/sponsors/taltech-color.png differ diff --git a/src/components/Sponsors.tsx b/src/components/Sponsors.tsx index 511144a..5e39704 100644 --- a/src/components/Sponsors.tsx +++ b/src/components/Sponsors.tsx @@ -4,7 +4,7 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla"; import { useTranslations } from "next-intl"; import Image from "next/image"; import NextLink from "next/link"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; interface Sponsor { href: string; @@ -25,14 +25,14 @@ const highlightedSponsors: Sponsor[] = [ }, { href: "https://www.redbull.com/ee-et/", - src: "/sponsors/redbull-wordmark.png", + src: "/sponsors/redbull-wordmark-trimmed.png", alt: "Red Bull", width: 3509, height: 2480, }, { href: "https://www.stillframe.ee/", - src: "/sponsors/Still_Frame_logo_2020_Gold_2.png", + src: "/sponsors/still-frame-trimmed.png", alt: "Still Frame", width: 1335, height: 1617, @@ -114,7 +114,7 @@ const sponsors: Sponsor[] = [ }, { href: "https://www.linkedin.com/company/gamedev-guild/", - src: "/sponsors/estonian_gamedev_guild.png", + src: "/sponsors/estonian-gamedev-guild-trimmed.png", alt: "Estonian Gamedev Guild", width: 244, height: 244, @@ -150,7 +150,7 @@ const sponsors: Sponsor[] = [ }, { href: "https://2fast.ee/", - src: "/sponsors/2fast.png", + src: "/sponsors/2fast-trimmed.png", alt: "2FAST", width: 244, height: 244, @@ -187,7 +187,7 @@ const sponsors: Sponsor[] = [ }, { href: "https://www.tallinn.ee/et/mank", - src: "/sponsors/MANK.png", + src: "/sponsors/mank-trimmed.png", alt: "Mustamäe Avatud Noortekeskus", width: 200, height: 244, @@ -232,6 +232,7 @@ interface SponsorsProps { } const tickerSponsors = [...sponsors, ...sponsors, ...sponsors, ...sponsors]; +const tickerEaseDuration = 100; interface FeaturedSponsorProps { sponsor: Sponsor; @@ -260,33 +261,49 @@ export default function Sponsors({ className = "", }: SponsorsProps) { const t = useTranslations(); - const [isTickerPaused, setIsTickerPaused] = useState(false); - const pauseTimerRef = useRef | null>(null); + const tickerTrackRef = useRef(null); + const tickerEaseFrameRef = useRef(null); - const clearPauseTimer = () => { - if (pauseTimerRef.current) { - clearTimeout(pauseTimerRef.current); - pauseTimerRef.current = null; + const easeTickerTo = (targetPlaybackRate: number) => { + if (tickerEaseFrameRef.current !== null) { + cancelAnimationFrame(tickerEaseFrameRef.current); } + + const animation = tickerTrackRef.current?.getAnimations()[0]; + if (!animation) return; + + const initialPlaybackRate = animation.playbackRate; + const startTime = performance.now(); + + const updatePlaybackRate = (currentTime: number) => { + const progress = Math.min( + (currentTime - startTime) / tickerEaseDuration, + 1, + ); + const easedProgress = (1 - Math.cos(Math.PI * progress)) / 2; + const playbackRate = + initialPlaybackRate + + (targetPlaybackRate - initialPlaybackRate) * easedProgress; + + animation.updatePlaybackRate(playbackRate); + + if (progress < 1) { + tickerEaseFrameRef.current = requestAnimationFrame(updatePlaybackRate); + } else { + tickerEaseFrameRef.current = null; + } + }; + + tickerEaseFrameRef.current = requestAnimationFrame(updatePlaybackRate); }; - const handleTickerMouseEnter = () => { - clearPauseTimer(); - pauseTimerRef.current = setTimeout(() => { - setIsTickerPaused(true); - pauseTimerRef.current = null; - }, 100); - }; - - const handleTickerMouseLeave = () => { - clearPauseTimer(); - setIsTickerPaused(false); - }; + const handleTickerMouseEnter = () => easeTickerTo(0); + const handleTickerMouseLeave = () => easeTickerTo(1); useEffect(() => { return () => { - if (pauseTimerRef.current) { - clearTimeout(pauseTimerRef.current); + if (tickerEaseFrameRef.current !== null) { + cancelAnimationFrame(tickerEaseFrameRef.current); } }; }, []); @@ -318,22 +335,25 @@ export default function Sponsors({ onMouseEnter={handleTickerMouseEnter} onMouseLeave={handleTickerMouseLeave} > -
+
{tickerSponsors.map((sponsor, index) => ( = sponsors.length} tabIndex={index >= sponsors.length ? -1 : undefined} > {sponsor.alt} ))} @@ -363,10 +383,6 @@ export default function Sponsors({ will-change: transform; } - .ticker-track-paused { - animation-play-state: paused; - } - @keyframes sponsors-ticker { from { transform: translateX(0%);