ar.badiei/aragrp

Fork 0

Files

T

ar.badieiandCursor c2376b3b9e

Build & Push Docker Image / build (push) Has been cancelled

Details

feat: redesign landing page with brand system and section blocks

Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-07-23 17:00:55 +03:30

2.5 KiB

Raw Permalink Blame History

Motion

Motion should clarify hierarchy and presence—not decorate every pixel.

Canonical scroll motion: lib/block-motion.ts + components/motion-reveal.tsx. Header / micro-interactions use CSS transitions documented below.

Duration scale

ms	Tailwind / CSS	Use
150	`duration-150`	Micro feedback (rarely needed)
200	`duration-200`	Buttons, inputs, cards, links (default UI)
250	`duration-250`	Base heading/paragraph color transitions
300	`duration-300`	Header chrome, nav, sheets, larger reveals
500	`duration-500`	Timeline / emphasis state changes, section reveals

Do not invent duration-[350ms] or multi-second loops for marketing UI.

Easing

Token	Value	Use
UI default	`ease-out`	Hovers, chrome
Block reveal	`blockEase = [0.22, 1, 0.36, 1]`	Scroll entrances
Spring (hero)	`type: "spring", bounce: ~0.3`	Occasional hero text only

Hover transitions

Prefer transitioning:

color, background-color, border-color
box-shadow, opacity
transform (translate, scale)

Never animate layout (top/left/width/height/margin) when transform or opacity can achieve the effect.

Buttons already include active:scale-[0.98] and duration-200.

Scroll animations

import { MotionReveal, MotionRevealItem } from "@/components/motion-reveal";

<MotionReveal stagger>
  <MotionRevealItem>…</MotionRevealItem>
  <MotionRevealItem>…</MotionRevealItem>
</MotionReveal>

Defaults from block-motion.ts:

Option	Value
Duration	0.5s
Offset	`y: 24` → `0`
Stagger	0.08s children
Viewport	`once: true`, `amount: 0.2`, bottom margin `-10%`

Keep stagger counts small (≤ ~8).

Reduced motion

MotionReveal short-circuits to static markup when useReducedMotion() is true.
Timeline and header animations disable under @media (prefers-reduced-motion: reduce) in globals.css.
New animations must honor reduced motion.

Performance rules

Prefer transform + opacity.
Avoid animating blur on large surfaces in loops (hero entrance blur is OK once).
Do not use will-change everywhere—only hot paths (e.g. timeline progress).
No infinite attention-grabbing pulses on primary CTAs.

Forbidden

Layout thrashing animations.
Autoplaying large Lottie stacks on every section.
Ignoring prefers-reduced-motion.

2.5 KiB Raw Permalink Blame History