feat: add smooth site-wide animations with framer-motion
Local Build and Deploy / deploy (push) Successful in 53s
Local Build and Deploy / deploy (push) Successful in 53s
- 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
1 parent
ac1b412756
commit
a3b077c488
13 files changed
+624
-142
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user