remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add smooth site-wide animations with framer-motion
Local Build and Deploy / deploy (push) Successful in 53s
Details

Browse Source 
- Add framer-motion and tailwindcss-animate for transitions
- Add page transitions via AnimatePresence in the site layout
- Convert nav dropdown and mobile menu to animated motion components
- Add entry animation to the radio player widget
- Add reveal/stagger animations to the home page views
- Add shared motion utilities and reusable animated components
This commit is contained in:
openhands committed 2026-07-16 20:58:18 +02:00
1 parent ac1b412756
commit a3b077c488
13 files changed
+624 -142
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+2
View File
@@ -33,6 +33,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"croner": "^10.0.1",
"framer-motion": "^12.42.2",
"hash-wasm": "^4.12.0",
"ioredis": "^5.11.1",
"jpeg-js": "^0.4.4",
@@ -55,6 +56,7 @@
"sanitize-html": "^2.17.5",
"sonner": "^2.0.7",
"tailwind-merge": "^3.6.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.24.0"
},
"devDependencies": {
pnpm-lock.yaml
Generated
+50
View File
@@ -49,6 +49,9 @@ importers:
croner:
specifier: ^10.0.1
version: 10.0.1
framer-motion:
specifier: ^12.42.2
version: 12.42.2([email protected]([email protected]))([email protected])
hash-wasm:
specifier: ^4.12.0
version: 4.12.0
@@ -115,6 +118,9 @@ importers:
tailwind-merge:
specifier: ^3.6.0
version: 3.6.0
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7([email protected])
zod:
specifier: ^3.24.0
version: 3.25.76
@@ -2462,6 +2468,20 @@ packages:
resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
engines: {node: '>=14'}
[email protected]:
resolution: {integrity: sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
[email protected]:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2693,6 +2713,12 @@ packages:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
[email protected]:
resolution: {integrity: sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==}
[email protected]:
resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
[email protected]:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -3085,6 +3111,11 @@ packages:
[email protected]:
resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
[email protected]:
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
[email protected]:
resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
@@ -5252,6 +5283,15 @@ snapshots:
cross-spawn: 7.0.6
signal-exit: 4.1.0
[email protected]([email protected]([email protected]))([email protected]):
dependencies:
motion-dom: 12.42.2
motion-utils: 12.39.0
tslib: 2.8.1
optionalDependencies:
react: 19.2.7
react-dom: 19.2.7([email protected])
[email protected]:
optional: true
@@ -5445,6 +5485,12 @@ snapshots:
[email protected]: {}
[email protected]:
dependencies:
motion-utils: 12.39.0
[email protected]: {}
[email protected]: {}
[email protected]:
@@ -5911,6 +5957,10 @@ snapshots:
[email protected]: {}
[email protected]([email protected]):
dependencies:
tailwindcss: 4.3.2
[email protected]: {}
[email protected]: {}
src/app/(site)/layout.tsx
+4 -1
View File
@@ -1,4 +1,5 @@
import type { ReactNode } from "react";
import MotionPageWrapper from "@/components/motion-page-wrapper";
import { Navigation } from "@/components/navigation";
import RadioPlayerGate from "@/components/public/radio-player-gate";
import { SiteFooter } from "@/components/site-footer";
@@ -17,7 +18,9 @@ export default function SiteLayout({ children }: { children: ReactNode }) {
<Navigation />
<main>
<div className="mx-auto mt-6 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-6 px-4 py-4 md:mt-0 md:p-6">
<div className="col-span-12 min-w-0">{children}</div>
<div className="col-span-12 min-w-0">
<MotionPageWrapper>{children}</MotionPageWrapper>
</div>
</div>
</main>
<SiteFooter />
src/app/globals.css
+92 -24
View File
@@ -1,6 +1,7 @@
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
@@ -270,7 +271,6 @@ html.dark body.site-bg:has([data-admin]) {
background-blend-mode: normal;
}
.article-body {
line-height: 1.7;
}
@@ -382,7 +382,11 @@ a:hover {
font-size: 14px;
cursor: pointer;
transition: all 0.18s ease;
background: color-mix(in srgb, var(--color-text-muted) 14%, var(--color-surface));
background: color-mix(
in srgb,
var(--color-text-muted) 14%,
var(--color-surface)
);
color: var(--color-text-readable, var(--color-text));
text-decoration: none;
}
@@ -642,8 +646,16 @@ tbody tr:hover {
flex-direction: column;
width: 100%;
background: var(--color-surface);
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
border: 1px solid
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 12%,
transparent
);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
@@ -663,7 +675,11 @@ tbody tr:hover {
color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))
);
border-bottom: 1px solid
color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 8%, transparent);
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 8%,
transparent
);
}
.content-card-icon {
flex: none;
@@ -690,7 +706,10 @@ tbody tr:hover {
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
}
.content-card-subtitle {
margin: 0.15rem 0 0;
@@ -740,7 +759,12 @@ tbody tr:hover {
}
.stat-block {
background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
border: 1px solid
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 12%,
transparent
);
border-radius: 12px;
padding: 0.85rem 1rem;
text-align: center;
@@ -776,7 +800,11 @@ tbody tr:hover {
font-weight: 700;
padding: 0.1rem 0.55rem 0.1rem 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
background: color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 14%,
transparent
);
color: var(--color-text-muted-readable, var(--color-text-muted));
}
.online-badge.online {
@@ -806,7 +834,12 @@ tbody tr:hover {
font-weight: 800;
font-size: 0.95rem;
background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
border: 1px solid
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 18%,
transparent
);
}
.rank-badge.rank-1 {
background: color-mix(in srgb, var(--color-warning) 20%, transparent);
@@ -852,7 +885,11 @@ tbody tr:hover {
gap: 0.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid
color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 14%,
transparent
);
overflow-x: auto;
}
.radio-sidebar-head {
@@ -917,7 +954,11 @@ tbody tr:hover {
position: relative;
width: min(440px, 100%);
border: 1px solid
color-mix(in srgb, var(--color-primary) 30%, color-mix(in srgb, var(--color-text-muted) 22%, transparent));
color-mix(
in srgb,
var(--color-primary) 30%,
color-mix(in srgb, var(--color-text-muted) 22%, transparent)
);
border-radius: 8px;
background:
linear-gradient(
@@ -927,7 +968,10 @@ tbody tr:hover {
),
var(--color-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
padding: 1.25rem;
}
.cms-info-close {
@@ -938,7 +982,12 @@ tbody tr:hover {
width: 2rem;
height: 2rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
border: 1px solid
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 18%,
transparent
);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
color: var(--color-text-muted-readable, var(--color-text-muted));
@@ -947,7 +996,10 @@ tbody tr:hover {
line-height: 1;
}
.cms-info-close:hover {
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.cms-info-kicker {
@@ -970,7 +1022,10 @@ tbody tr:hover {
border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
font-size: 0.75rem;
font-weight: 900;
padding: 0.3rem 0.6rem;
@@ -988,7 +1043,12 @@ tbody tr:hover {
margin: 1rem 0 0;
}
.cms-info-grid div {
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
border: 1px solid
color-mix(
in srgb,
var(--color-text-muted-readable, var(--color-text-muted)) 14%,
transparent
);
border-radius: 8px;
background: color-mix(in srgb, var(--color-background) 68%, transparent);
padding: 0.7rem;
@@ -1001,7 +1061,10 @@ tbody tr:hover {
}
.cms-info-grid dd {
margin: 0.18rem 0 0;
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
font-size: 0.8rem;
font-weight: 900;
line-height: 1.25;
@@ -1022,7 +1085,10 @@ tbody tr:hover {
padding: 0.65rem 0.75rem;
}
.cms-info-credit span {
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
color: var(
--color-surface-text-readable,
var(--color-text-readable, var(--color-text))
);
font-weight: 900;
}
.cms-info-credit small {
@@ -1174,9 +1240,10 @@ body:has([data-admin]) {
}
/* Admin forms / boxes follow admin tokens in both light and dark. */
body:has([data-admin]) input:not([type="checkbox"]):not([type="radio"]):not(
[type="range"]
):not([type="file"]):not([type="color"]),
body:has([data-admin])
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
[type="file"]
):not([type="color"]),
body:has([data-admin]) select,
body:has([data-admin]) textarea {
background-color: var(--admin-surface-elevated);
@@ -1210,9 +1277,10 @@ body:has([data-admin]) .btn-outline:hover {
color: var(--admin-text);
}
/* Override public html.dark input hardcodes inside admin. */
html.dark body:has([data-admin]) input:not([type="checkbox"]):not(
[type="radio"]
):not([type="range"]):not([type="file"]):not([type="color"]),
html.dark body:has([data-admin])
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
[type="file"]
):not([type="color"]),
html.dark body:has([data-admin]) select,
html.dark body:has([data-admin]) textarea {
background: var(--admin-surface-elevated);
src/components/home/guest-view.tsx
+5 -4
View File
@@ -2,6 +2,7 @@ import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { HomeLoginForm } from "@/components/auth/home-login-form";
import { Reveal } from "@/components/motion-reveal";
import { avatarImageUrl, excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -40,7 +41,7 @@ export default async function GuestView() {
return (
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
<div
className="overflow-hidden rounded-lg border"
style={{
@@ -158,9 +159,9 @@ export default async function GuestView() {
</div>
</div>
)}
</div>
</Reveal>
<div className="flex w-full flex-col gap-4 md:w-2/3">
<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
<div
className="overflow-hidden rounded-lg border"
style={{
@@ -237,7 +238,7 @@ export default async function GuestView() {
)}
</div>
</div>
</div>
</Reveal>
</div>
);
}
src/components/home/user-view.tsx
+31 -19
View File
@@ -1,6 +1,7 @@
import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { Reveal } from "@/components/motion-reveal";
import { avatarImageUrl, excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -54,7 +55,7 @@ export default async function UserView({
return (
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex w-full flex-col gap-6 md:w-3/4">
<Reveal className="flex w-full flex-col gap-6 md:w-3/4">
<div className="relative flex h-[340px] items-start overflow-hidden rounded-lg">
<div
className="absolute inset-0"
@@ -80,9 +81,11 @@ export default async function UserView({
className="absolute -top-10 -left-10 w-48 h-48 rounded-full opacity-[0.08] blur-[60px]"
style={{ background: "var(--color-primary)" }}
/>
<div className="relative z-10 mx-auto mt-8 flex w-[95%] max-w-3xl items-center justify-between rounded-2xl px-8 py-6"
<div
className="relative z-10 mx-auto mt-8 flex w-[95%] max-w-3xl items-center justify-between rounded-2xl px-8 py-6"
style={{
background: "linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%)",
background:
"linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%)",
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
}}
>
@@ -91,16 +94,19 @@ export default async function UserView({
href={`/u/${username}`}
className="transition-transform duration-300 hover:scale-105"
>
<div
className="rounded-full p-[3px]"
style={{
border: "3px solid var(--panel-border-color)",
boxShadow:
"0 0 24px color-mix(in srgb, var(--panel-border-color) 50%, transparent)",
}}
>
<div
className="rounded-full p-[3px]"
style={{
border: "3px solid var(--panel-border-color)",
boxShadow:
"0 0 24px color-mix(in srgb, var(--panel-border-color) 50%, transparent)",
}}
>
<Image
src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
src={avatarImageUrl(imager, look, {
size: "l",
direction: 2,
})}
alt={username}
width={110}
height={190}
@@ -110,9 +116,11 @@ export default async function UserView({
/>
</div>
</Link>
<div className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
<div
className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
style={{
background: "color-mix(in srgb, var(--color-surface) 88%, transparent)",
background:
"color-mix(in srgb, var(--color-surface) 88%, transparent)",
backdropFilter: "blur(8px)",
}}
>
@@ -123,8 +131,12 @@ export default async function UserView({
>
{username}
</Link>
<p className="text-sm drop-shadow-md max-w-[240px] leading-tight"
style={{ color: "color-mix(in srgb, var(--color-text) 80%, transparent)" }}
<p
className="text-sm drop-shadow-md max-w-[240px] leading-tight"
style={{
color:
"color-mix(in srgb, var(--color-text) 80%, transparent)",
}}
>
{motto || "Welcome back!"}
</p>
@@ -217,9 +229,9 @@ export default async function UserView({
)}
</div>
</div>
</div>
</Reveal>
<div className="flex w-full flex-col gap-6 md:w-1/4">
<Reveal delay={0.15} className="flex w-full flex-col gap-6 md:w-1/4">
{latestArticle ? (
<div
className="overflow-hidden rounded-lg border"
@@ -267,7 +279,7 @@ export default async function UserView({
</Link>
</div>
) : null}
</div>
</Reveal>
</div>
);
}
src/components/mobile-nav.tsx
+81 -77
View File
@@ -1,7 +1,9 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import { type ReactNode, useRef } from "react";
import { type ReactNode, useRef, useState } from "react";
import { mobileMenuVariants } from "@/lib/motion";
interface MobileNavProps {
children: ReactNode;
@@ -16,30 +18,26 @@ export function MobileNav({
closeLabel = "Close menu",
brandLabel = "Atom",
}: MobileNavProps) {
const detailsRef = useRef<HTMLDetailsElement>(null);
const handleClick = (e: React.MouseEvent) => {
if ((e.target as HTMLElement).closest("a") && detailsRef.current) {
detailsRef.current.open = false;
}
};
const [open, setOpen] = useState(false);
const detailsRef = useRef<HTMLDivElement>(null);
return (
<details
ref={detailsRef}
onClick={handleClick}
className="group relative md:hidden"
>
<summary
<div ref={detailsRef} className="group relative md:hidden">
<button
type="button"
onClick={() => setOpen((o) => !o)}
className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
[&::-webkit-details-marker]:hidden transition-colors duration-150
transition-colors duration-150
hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
active:scale-[0.96]
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
aria-label={menuLabel}
aria-label={open ? closeLabel : menuLabel}
aria-expanded={open}
>
<svg
className="w-6 h-6 details-open:hidden"
<motion.svg
className="w-6 h-6"
animate={{ rotate: open ? 90 : 0 }}
transition={{ duration: 0.2 }}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -47,68 +45,74 @@ export function MobileNav({
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="4" y1="7" x2="20" y2="7" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="17" x2="20" y2="17" />
</svg>
<svg
className="w-6 h-6 hidden details-open:block"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</summary>
{open ? (
<>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</>
) : (
<>
<line x1="4" y1="7" x2="20" y2="7" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="17" x2="20" y2="17" />
</>
)}
</motion.svg>
</button>
<div
className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
style={{ backgroundColor: "transparent" }}
>
<div
className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
style={{
borderColor:
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
boxShadow:
"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
}}
>
<div
className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
style={{
backgroundColor:
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
<AnimatePresence>
{open && (
<motion.div
className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
style={{ backgroundColor: "transparent" }}
variants={mobileMenuVariants}
initial="hidden"
animate="visible"
exit="exit"
>
<div
className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
style={{
borderColor:
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
boxShadow:
"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
}}
>
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={22}
height={22}
className="shrink-0"
/>
<span
className="text-sm font-extrabold uppercase tracking-wide"
style={{
color: "var(--color-navbar-text-readable, var(--color-text))",
}}
>
{brandLabel}
</span>
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
{closeLabel}
</span>
</div>
<div
className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
style={{
backgroundColor:
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
}}
>
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={22}
height={22}
className="shrink-0"
/>
<span
className="text-sm font-extrabold uppercase tracking-wide"
style={{
color:
"var(--color-navbar-text-readable, var(--color-text))",
}}
>
{brandLabel}
</span>
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
{closeLabel}
</span>
</div>
{children}
</div>
</div>
</details>
{children}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
);
}
src/components/motion-elements.tsx
+100
View File
@@ -0,0 +1,100 @@
"use client";
import type { HTMLMotionProps } from "framer-motion";
import { motion } from "framer-motion";
import {
fadeIn,
fadeInUp,
hoverLift,
hoverScale,
scaleIn,
staggerContainer,
staggerItem,
} from "@/lib/motion";
type DivProps = HTMLMotionProps<"div">;
export function AnimatedSection({ children, className, ...props }: DivProps) {
return (
<motion.div
className={className}
variants={staggerContainer}
initial="hidden"
animate="visible"
{...props}
>
{children}
</motion.div>
);
}
export function AnimatedChild({ children, className, ...props }: DivProps) {
return (
<motion.div className={className} variants={staggerItem} {...props}>
{children}
</motion.div>
);
}
export function FadeIn({ children, className, ...props }: DivProps) {
return (
<motion.div
className={className}
variants={fadeIn}
initial="hidden"
animate="visible"
{...props}
>
{children}
</motion.div>
);
}
export function FadeInUp({ children, className, ...props }: DivProps) {
return (
<motion.div
className={className}
variants={fadeInUp}
initial="hidden"
animate="visible"
{...props}
>
{children}
</motion.div>
);
}
export function ScaleIn({ children, className, ...props }: DivProps) {
return (
<motion.div
className={className}
variants={scaleIn}
initial="hidden"
animate="visible"
{...props}
>
{children}
</motion.div>
);
}
export function HoverCard({ children, className, ...props }: DivProps) {
return (
<motion.div
className={className}
{...hoverLift}
whileHover={{ y: -4, transition: { duration: 0.2 } }}
{...props}
>
{children}
</motion.div>
);
}
export function HoverButton({ children, className, ...props }: DivProps) {
return (
<motion.div className={className} {...hoverScale} {...props}>
{children}
</motion.div>
);
}
src/components/motion-page-wrapper.tsx
+28
View File
@@ -0,0 +1,28 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { pageTransition } from "@/lib/motion";
export default function MotionPageWrapper({
children,
}: {
children: ReactNode;
}) {
const pathname = usePathname();
return (
<AnimatePresence mode="wait">
<motion.div
key={pathname}
variants={pageTransition}
initial="initial"
animate="enter"
exit="exit"
>
{children}
</motion.div>
</AnimatePresence>
);
}
src/components/motion-reveal.tsx
+55
View File
@@ -0,0 +1,55 @@
"use client";
import { motion } from "framer-motion";
import type { ReactNode } from "react";
interface RevealProps {
children: ReactNode;
className?: string;
delay?: number;
}
export function Reveal({ children, className, delay = 0 }: RevealProps) {
return (
<motion.div
className={className}
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.45, delay, ease: [0.25, 0.1, 0.25, 1] }}
>
{children}
</motion.div>
);
}
export function RevealStagger({ children, className }: RevealProps) {
return (
<motion.div
className={className}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
variants={{
hidden: {},
visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
}}
>
{children}
</motion.div>
);
}
export function RevealItem({ children, className }: RevealProps) {
return (
<motion.div
className={className}
variants={{
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
}}
>
{children}
</motion.div>
);
}
src/components/nav-dropdown.tsx
+55 -15
View File
@@ -1,5 +1,9 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import type { ReactNode } from "react";
import { type ReactNode, useEffect, useRef, useState } from "react";
import { dropdownVariants } from "@/lib/motion";
interface NavDropdownProps {
label: string;
@@ -8,11 +12,37 @@ interface NavDropdownProps {
}
export function NavDropdown({ label, icon, children }: NavDropdownProps) {
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") setOpen(false);
}
if (open) document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [open]);
useEffect(() => {
function onOutsideClick(e: MouseEvent) {
if (ref.current && !ref.current.contains(e.target as Node)) {
setOpen(false);
}
}
if (open) {
document.addEventListener("mousedown", onOutsideClick);
}
return () => document.removeEventListener("mousedown", onOutsideClick);
}, [open]);
return (
<details className="relative">
<summary
className="nav-item cursor-pointer [&::-webkit-details-marker]:hidden"
<div ref={ref} className="relative">
<button
type="button"
onClick={() => setOpen((o) => !o)}
className="nav-item cursor-pointer"
aria-haspopup="true"
aria-expanded={open}
>
{icon ? (
<Image
@@ -25,8 +55,10 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
/>
) : null}
{label}
<svg
className="ml-auto md:ml-1 w-3 h-3 details-open:rotate-180"
<motion.svg
className="ml-auto md:ml-1 w-3 h-3 shrink-0"
animate={{ rotate: open ? 180 : 0 }}
transition={{ duration: 0.2 }}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -37,14 +69,22 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div
className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
role="menu"
>
{children}
</div>
</details>
</motion.svg>
</button>
<AnimatePresence>
{open && (
<motion.div
className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
role="menu"
variants={dropdownVariants}
initial="hidden"
animate="visible"
exit="exit"
>
{children}
</motion.div>
)}
</AnimatePresence>
</div>
);
}
src/components/public/radio-player.tsx
+6 -2
View File
@@ -1,5 +1,6 @@
"use client";
import { motion } from "framer-motion";
import { useCallback, useEffect, useRef, useState } from "react";
/**
@@ -228,7 +229,10 @@ export default function RadioPlayer() {
const border = "color-mix(in srgb, var(--color-text-muted) 18%, transparent)";
return (
<section
<motion.section
initial={{ opacity: 0, y: 20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
aria-label={`${config.name} player`}
style={{
position: "fixed",
@@ -392,6 +396,6 @@ export default function RadioPlayer() {
{/* Hidden stream element. preload="none" so nothing loads until the user
hits play (and browsers block autoplay with sound regardless). */}
<audio ref={audioRef} preload="none" />
</section>
</motion.section>
);
}
src/lib/motion.ts
+115
View File
@@ -0,0 +1,115 @@
import type { Variants } from "framer-motion";
export const fadeIn: Variants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.4 } },
};
export const fadeInUp: Variants = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
};
export const fadeInDown: Variants = {
hidden: { opacity: 0, y: -12 },
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
};
export const fadeInLeft: Variants = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
};
export const fadeInRight: Variants = {
hidden: { opacity: 0, x: 20 },
visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
};
export const scaleIn: Variants = {
hidden: { opacity: 0, scale: 0.95 },
visible: { opacity: 1, scale: 1, transition: { duration: 0.25 } },
};
export const slideUp: Variants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1] },
},
};
export const staggerContainer: Variants = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.07,
delayChildren: 0.1,
},
},
};
export const staggerItem: Variants = {
hidden: { opacity: 0, y: 16 },
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
};
export const pageTransition: Variants = {
initial: { opacity: 0, y: 8 },
enter: {
opacity: 1,
y: 0,
transition: { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] },
},
exit: { opacity: 0, y: -8, transition: { duration: 0.2 } },
};
export const dropdownVariants: Variants = {
hidden: { opacity: 0, y: -6, scale: 0.97 },
visible: {
opacity: 1,
y: 0,
scale: 1,
transition: { duration: 0.18, ease: "easeOut" },
},
exit: { opacity: 0, y: -4, scale: 0.97, transition: { duration: 0.12 } },
};
export const mobileMenuVariants: Variants = {
hidden: { opacity: 0, scale: 0.96, y: -8 },
visible: {
opacity: 1,
scale: 1,
y: 0,
transition: { duration: 0.2, ease: "easeOut" },
},
exit: { opacity: 0, scale: 0.96, y: -6, transition: { duration: 0.15 } },
};
export const modalOverlayVariants: Variants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.2 } },
exit: { opacity: 0, transition: { duration: 0.15 } },
};
export const modalContentVariants: Variants = {
hidden: { opacity: 0, scale: 0.95, y: 10 },
visible: {
opacity: 1,
scale: 1,
y: 0,
transition: { duration: 0.25, ease: [0.25, 0.1, 0.25, 1] },
},
exit: { opacity: 0, scale: 0.95, y: 10, transition: { duration: 0.15 } },
};
export const hoverScale = {
whileHover: { scale: 1.03 },
whileTap: { scale: 0.97 },
transition: { type: "spring" as const, stiffness: 400, damping: 17 },
};
export const hoverLift = {
whileHover: { y: -3, transition: { duration: 0.2 } },
whileTap: { y: 0 },
};