Skip to content

fix: respect reduced motion on landing #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HaroldTheAI wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: respect reduced motion on landing #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,19 @@ body {
background-position: 200% center;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}

.gradient-text-animated {
animation: none !important;
background-position: 0% center;
}
}
65 changes: 47 additions & 18 deletions components/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { MagneticWrap } from "@/components/landing/motion";
import { MagneticWrap, usePrefersReducedMotion } from "@/components/landing/motion";
import { ScorePreview } from "@/components/landing/score-preview";
import { AnimatedCounter, AnimatedGradientText } from "@/components/landing/text-effects";
import { getDappUrl } from "@/lib/site";
import { cn } from "@/lib/utils";

const fadeUp = (delay: number) =>
({
Expand All @@ -14,6 +15,11 @@ const fadeUp = (delay: number) =>
});

export function Hero() {
const prefersReducedMotion = usePrefersReducedMotion();
const entranceClass = prefersReducedMotion
? "opacity-100"
: "animate-slide-up opacity-0";

return (
<section className="relative pt-28 pb-16 sm:pt-36 sm:pb-24 px-4 sm:px-6 overflow-hidden">
<div className="absolute top-20 right-0 w-64 h-64 opacity-[0.03] pointer-events-none hidden lg:block">
Expand All @@ -29,10 +35,18 @@ export function Hero() {
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div className="text-center lg:text-left">
<div
className="inline-flex items-center gap-2 border border-white/15 bg-white/[0.03] px-4 py-1.5 mb-8 zk-badge animate-fade-in opacity-0"
style={fadeUp(100)}
className={cn(
"inline-flex items-center gap-2 border border-white/15 bg-white/[0.03] px-4 py-1.5 mb-8 zk-badge",
prefersReducedMotion ? "opacity-100" : "animate-fade-in opacity-0"
)}
style={prefersReducedMotion ? undefined : fadeUp(100)}
>
<span className="w-1.5 h-1.5 bg-white animate-pulse" />
<span
className={cn(
"w-1.5 h-1.5 bg-white",
!prefersReducedMotion && "animate-pulse"
)}
/>
<span className="text-xs font-mono font-semibold uppercase tracking-widest text-white/60">
Zero-Knowledge · On-chain only
</span>
Expand All @@ -41,42 +55,51 @@ export function Hero() {
<h1 className="font-display text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black tracking-tight leading-[1.05] mb-6">
<span className="block overflow-hidden">
<span
className="block animate-slide-up opacity-0 text-white"
style={fadeUp(180)}
className={cn("block text-white", entranceClass)}
style={prefersReducedMotion ? undefined : fadeUp(180)}
>
YOUR WALLET
</span>
</span>
<span className="block overflow-hidden">
<span
className="block animate-slide-up opacity-0"
style={fadeUp(300)}
className={cn("block", entranceClass)}
style={prefersReducedMotion ? undefined : fadeUp(300)}
>
<AnimatedGradientText>IS YOUR CREDIT.</AnimatedGradientText>
</span>
</span>
</h1>

<p
className="text-base sm:text-lg text-white/45 max-w-xl mx-auto lg:mx-0 mb-4 leading-relaxed tracking-wide animate-slide-up opacity-0"
style={fadeUp(400)}
className={cn(
"text-base sm:text-lg text-white/45 max-w-xl mx-auto lg:mx-0 mb-4 leading-relaxed tracking-wide",
entranceClass
)}
style={prefersReducedMotion ? undefined : fadeUp(400)}
>
All-in-one portable credit scoring for Stellar. Discover your
score, access better rates, and activate your on-chain reputation
in one place.
</p>

<p
className="text-sm text-white/35 max-w-xl mx-auto lg:mx-0 mb-10 tracking-wide animate-slide-up opacity-0"
style={fadeUp(450)}
className={cn(
"text-sm text-white/35 max-w-xl mx-auto lg:mx-0 mb-10 tracking-wide",
entranceClass
)}
style={prefersReducedMotion ? undefined : fadeUp(450)}
>
No banks. No forms. No gatekeepers. Built from real on-chain proof,
not paperwork.
</p>

<div
className="flex flex-col sm:flex-row flex-wrap items-center lg:items-start justify-center lg:justify-start gap-4 animate-slide-up opacity-0"
style={fadeUp(580)}
className={cn(
"flex flex-col sm:flex-row flex-wrap items-center lg:items-start justify-center lg:justify-start gap-4",
entranceClass
)}
style={prefersReducedMotion ? undefined : fadeUp(580)}
>
<MagneticWrap strength={0.2}>
<a href={getDappUrl("/register")}>
Expand Down Expand Up @@ -114,8 +137,11 @@ export function Hero() {
</div>

<div
className="mt-12 grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0 animate-slide-up opacity-0"
style={fadeUp(720)}
className={cn(
"mt-12 grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0",
entranceClass
)}
style={prefersReducedMotion ? undefined : fadeUp(720)}
>
<div className="text-center lg:text-left">
<div className="text-2xl font-bold text-white tabular-nums">0-850</div>
Expand All @@ -142,8 +168,11 @@ export function Hero() {
</div>
</div>

<div className="animate-slide-up opacity-0" style={fadeUp(350)}>
<div className="lg:animate-float">
<div
className={entranceClass}
style={prefersReducedMotion ? undefined : fadeUp(350)}
>
<div className={cn(!prefersReducedMotion && "lg:animate-float")}>
<ScorePreview />
</div>
</div>
Expand Down
63 changes: 53 additions & 10 deletions components/landing/motion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,35 @@
"use client";

import { useEffect, useRef, type ReactNode } from "react";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export function usePrefersReducedMotion() {
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

useEffect(() => {
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
const handleChange = () => setPrefersReducedMotion(mediaQuery.matches);

handleChange();
mediaQuery.addEventListener("change", handleChange);

return () => mediaQuery.removeEventListener("change", handleChange);
}, []);

return prefersReducedMotion;
}

interface MouseParallaxBgProps {
className?: string;
}

export function MouseParallaxBg({ className }: MouseParallaxBgProps) {
const ref = useRef<HTMLDivElement>(null);
const prefersReducedMotion = usePrefersReducedMotion();

useEffect(() => {
const el = ref.current;
if (!el) return;
if (!el || prefersReducedMotion) return;

function onMove(e: MouseEvent) {
if (!el) return;
Expand All @@ -24,7 +41,7 @@ export function MouseParallaxBg({ className }: MouseParallaxBgProps) {

window.addEventListener("mousemove", onMove, { passive: true });
return () => window.removeEventListener("mousemove", onMove);
}, []);
}, [prefersReducedMotion]);

return (
<div
Expand All @@ -37,35 +54,47 @@ export function MouseParallaxBg({ className }: MouseParallaxBgProps) {
>
<div className="absolute inset-0 bg-black" />
<div
className="absolute inset-0 opacity-[0.25] animate-grid-drift"
className={cn(
"absolute inset-0 opacity-[0.25]",
!prefersReducedMotion && "animate-grid-drift"
)}
style={{
backgroundImage:
"linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)",
backgroundSize: "48px 48px",
}}
/>
<div
className="absolute -top-40 left-1/2 w-[900px] h-[900px] rounded-full bg-white/[0.03] blur-[140px] animate-glow-pulse transition-transform duration-700 ease-out"
className={cn(
"absolute -top-40 left-1/2 w-[900px] h-[900px] rounded-full bg-white/[0.03] blur-[140px] transition-transform duration-700 ease-out",
!prefersReducedMotion && "animate-glow-pulse"
)}
style={{
transform:
"translate(calc(-50% + var(--mx) * 40px), calc(0px + var(--my) * 30px))",
}}
/>
<div
className="absolute top-1/3 -right-32 w-[500px] h-[500px] rounded-full bg-neutral-800/[0.15] blur-[120px] animate-float transition-transform duration-700 ease-out"
className={cn(
"absolute top-1/3 -right-32 w-[500px] h-[500px] rounded-full bg-neutral-800/[0.15] blur-[120px] transition-transform duration-700 ease-out",
!prefersReducedMotion && "animate-float"
)}
style={{
transform: "translate(calc(var(--mx) * -25px), calc(var(--my) * 20px))",
}}
/>
<div
className="absolute bottom-0 -left-32 w-[600px] h-[600px] rounded-full bg-white/[0.02] blur-[100px] animate-float-delayed transition-transform duration-700 ease-out"
className={cn(
"absolute bottom-0 -left-32 w-[600px] h-[600px] rounded-full bg-white/[0.02] blur-[100px] transition-transform duration-700 ease-out",
!prefersReducedMotion && "animate-float-delayed"
)}
style={{
transform: "translate(calc(var(--mx) * 20px), calc(var(--my) * -15px))",
}}
/>
<div className="absolute inset-0 bg-noise opacity-[0.04]" />
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<FloatingParticles />
{!prefersReducedMotion && <FloatingParticles />}
<DiagonalSlash />
</div>
);
Expand Down Expand Up @@ -117,8 +146,10 @@ interface TiltCardProps {

export function TiltCard({ children, className }: TiltCardProps) {
const ref = useRef<HTMLDivElement>(null);
const prefersReducedMotion = usePrefersReducedMotion();

function handleMove(e: React.MouseEvent<HTMLDivElement>) {
if (prefersReducedMotion) return;
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
Expand All @@ -128,6 +159,7 @@ export function TiltCard({ children, className }: TiltCardProps) {
}

function handleLeave() {
if (prefersReducedMotion) return;
const el = ref.current;
if (!el) return;
el.style.transform =
Expand All @@ -139,7 +171,11 @@ export function TiltCard({ children, className }: TiltCardProps) {
ref={ref}
onMouseMove={handleMove}
onMouseLeave={handleLeave}
className={cn("transition-transform duration-200 ease-out will-change-transform", className)}
className={cn(
"transition-transform duration-200 ease-out will-change-transform",
prefersReducedMotion && "transition-none will-change-auto",
className
)}
>
{children}
</div>
Expand All @@ -158,8 +194,10 @@ export function MagneticWrap({
strength = 0.25,
}: MagneticWrapProps) {
const ref = useRef<HTMLDivElement>(null);
const prefersReducedMotion = usePrefersReducedMotion();

function handleMove(e: React.MouseEvent<HTMLDivElement>) {
if (prefersReducedMotion) return;
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
Expand All @@ -169,6 +207,7 @@ export function MagneticWrap({
}

function handleLeave() {
if (prefersReducedMotion) return;
const el = ref.current;
if (!el) return;
el.style.transform = "translate(0px, 0px)";
Expand All @@ -179,7 +218,11 @@ export function MagneticWrap({
ref={ref}
onMouseMove={handleMove}
onMouseLeave={handleLeave}
className={cn("inline-block transition-transform duration-300 ease-out", className)}
className={cn(
"inline-block transition-transform duration-300 ease-out",
prefersReducedMotion && "transition-none",
className
)}
>
{children}
</div>
Expand Down
Loading