gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove tacky red circles

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-18 05:50:15 +02:00
parent 1100e35091
commit b5f40a4007
1 changed files with 4 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/_components/Home/HomeHero.tsx
View File

@@ -7,9 +7,9 @@ import { useRef } from "react";
// The centerpiece is the site's own "G" mark (public/GLIcon.svg). GSAP draws the
// outline on with a stroke-dash trick, fades the fill in, then keeps everything
// gently alive (floating logo, counter-rotating rings). A curved arrow in the
// lower-right corner, with its label above the tail, points at the chat FAB to
// nudge people toward the assistant.
// gently alive (the logo floats). A curved arrow in the lower-right corner, with
// its label above the tail, points at the chat FAB to nudge people toward the
// assistant.
export default function HomeHero() {
const root = useRef<HTMLDivElement>(null);
const gPath = useRef<SVGPathElement>(null);
@@ -26,11 +26,6 @@ export default function HomeHero() {
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.from(
".hero-ring",
{ scale: 0, opacity: 0, duration: 0.9, stagger: 0.12, svgOrigin: "100 100" },
0,
);
if (logo) tl.to(logo, { strokeDashoffset: 0, duration: 1.3 }, 0.25);
tl.to(".hero-fill", { fillOpacity: 1, duration: 0.6 }, "-=0.35");
tl.from(".hero-line", { yPercent: 120, opacity: 0, duration: 0.7, stagger: 0.12 }, "-=0.25");
@@ -43,8 +38,6 @@ export default function HomeHero() {
// Idle life — runs forever once the entrance has settled.
gsap.to(".hero-logo", { y: -12, duration: 3.2, ease: "sine.inOut", yoyo: true, repeat: -1 });
gsap.to(".hero-ring-spin", { rotation: 360, duration: 44, ease: "none", repeat: -1, svgOrigin: "100 100" });
gsap.to(".hero-ring-spin-rev", { rotation: -360, duration: 32, ease: "none", repeat: -1, svgOrigin: "100 100" });
gsap.to(".hero-arrow-wrap", { y: 10, duration: 1.5, ease: "sine.inOut", yoyo: true, repeat: -1 });
},
{ scope: root },
@@ -55,44 +48,8 @@ export default function HomeHero() {
ref={root}
className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-6 text-center"
>
{/* Logo + orbiting rings */}
{/* Logo */}
<div className="hero-logo relative h-56 w-56 sm:h-64 sm:w-64">
<svg
className="absolute inset-0 h-full w-full text-primary/40"
viewBox="0 0 200 200"
fill="none"
aria-hidden="true"
>
<circle
className="hero-ring hero-ring-spin"
cx="100"
cy="100"
r="92"
stroke="currentColor"
strokeWidth="1"
strokeDasharray="2 10"
/>
<circle
className="hero-ring hero-ring-spin-rev"
cx="100"
cy="100"
r="78"
stroke="currentColor"
strokeWidth="1.5"
strokeDasharray="14 8"
opacity="0.6"
/>
<circle
className="hero-ring"
cx="100"
cy="100"
r="64"
stroke="currentColor"
strokeWidth="1"
opacity="0.35"
/>
</svg>
<svg
className="absolute inset-0 h-full w-full p-10 text-foreground"
viewBox="0 0 74.193405 74.232162"