UI Texture Specification

The "premium feel" of the interface comes from quantifiable detail parameters. Follow this specification when writing styles and animations; in case of conflict with existing design tokens / AntD theme of the project, the project takes precedence. For dual themes, always use CSS variables scoped with html[data-theme], do not use light-dark() (compatibility pitfalls with older kernels).

I. Texture Laws

Layered without borders: Express hierarchy with a 1%–3% brightness difference in background color shades; avoid pure black #000.
- Light: page background #f5f5f3 / card #fcfcfb; Dark: #0b0b0a / #151515 / #1a1a19 / #20201e (hierarchy from deep to light)
- For AntD projects, align with tokens (colorBgLayout/colorBgContainer), do not hardcode color values per component.
Focus with shadows, not outlines: Use a double-ring box-shadow (inner ring solid stroke + outer ring low-opacity primary color glow) for input / card focus to create a "gripping" feel; remove default outline, but :focus-visible must retain a visible focus indicator.
Dark mode font weight compensation: In dark mode, reduce font weight by one level (400→300, or precise 360 with variable fonts) to offset the halo effect of white text appearing bolder; switch via CSS variable with theme.
Streaming typing ink bloom: 90ms per character, transitioning from blur(6px) + semi-transparent to clear, easing with cubic-bezier(.215,.61,.355,1), adjacent characters staggered by 30ms; prohibit hard per-character pop-ins or entire paragraph flash-in.
Inline icon alignment: vertical-align: -0.125em, or wrap with flex + align-items: center.
Anti-jitter numbers: For statistics / time / prices, always use font-variant-numeric: tabular-nums so width does not jump on refresh or change.
Smooth fold: For height animations, do not calculate height with JS; use display: grid + grid-template-rows: 0fr → 1fr transition (inner element overflow: hidden).
Anti-widow/orphan: Body text text-wrap: pretty, headings text-wrap: balance.
Motion personality:
- Drag / snap / positioning: overdamped spring (stiffness 1200 / damping 80) or cubic-bezier(.2,0,0,1), zero bounce, one-shot lock.
- Like / checkmark / success feedback: underdamped (380 / 18), one small bounce, springy.
- Enter 150–250ms, exit 100–150ms, fast and restrained.
Auto-dismiss feedback: Temporary feedback (e.g., copy / save) fades out automatically after 2–2.5s and reverts to original state; do not require manual user dismissal.

II. Cheap Feel Reverse Checklist (Self-Check)

Rework if any item is present:

Using 1px borders to delineate all regions; large areas of pure black/pure white background.
Browser default blue outline on focus.
Dark mode inherits light mode font weight (white text appears fat).
Streaming output with per-character hard pop-in or entire paragraph flash-in.
Numbers jump on change; all animations share the same ease, no fast/slow personality.
Temporary feedback never disappears, requires manual dismissal.
Non-informative decorative clutter: ALL-CAPS eyebrow headings, mid-dot separated strings, button suffix →, gradient glow everywhere.

III. Component Selection Boundaries (Overlays & Feedback)

Scenario	Use	Key Points
Bottom half-screen content browsing with drag resizing (mobile)	Bottom Sheet (AntD `Drawer placement="bottom"`)	Damped gesture, multi-snap, height three tiers peek/half/full ≈ 25/50/90%
Few mutually exclusive actions (mobile)	Action Sheet	Flat buttons, independent cancel item, dangerous actions in red and separated from cancel
Lightweight toast after action, with undo	Snackbar (AntD `message` + undo button)	Bottom bar, timed auto-dismiss, undo must truly reverse the action
High-risk / blocking confirmation	AlertDialog (AntD `Modal`)	Lock background overlay; only irreversible actions disable Esc, others retain Esc
New feature / first-time guidance	Tour (AntD `Tour`)	Highlight positioning + step walkthrough, can skip
Image / media zoom	Lightbox (`antd-image` or custom)	Scroll zoom, Esc to close
Form field validation	Inline Alert (AntD Form validation)	Red text below input, real-time validation, disappears on fix; do not use global message for field errors

Blocking level from low to high: Snackbar < Inline Alert < Sheet < Action Sheet < Dialog. Desktop: prefer Modal/message. Mobile: prefer Sheet family. When in doubt, choose the less blocking option.

IV. Motion Personality Library (Use as Needed, Don't Stack All)

Completion feedback button: Click → collapse to circle → checkmark stroke drawn → particle burst, 300–400ms
Checkbox linkage: Check → progress ring grows + number scrolls + top background changes with progress
Stacked card expand: Card group expands sequentially (stagger 50ms per card), click again to collapse back
Snap card + line drawing: Horizontal swipe → snap to nearest card on release (spring 1200/80); on switch, draw timeline line segment-by-segment with stroke-dashoffset
Inertial scroll wheel: picker inertial rotation → decelerate → snap to tick; overscroll bounce back (underdamped 380/18)
Circular reveal transition: From finger / cursor press position, clip-path: circle() expands to fill, 400–500ms

Implementation: prioritize CSS transition/animation and Web Animations; spring parameters follow framer-motion semantics (stiffness/damping); all motions must have prefers-reduced-motion fallback (direct switch or fade-in is acceptable).

V. Delivery Self-Check

Layering via color shades, no pure black/pure white large background, no full borders dividing regions
Keyboard focus visible (double-ring shadow), touch targets ≥ 44px
Dark mode font weight compensated
Numbers tabular-nums; body text text-wrap: pretty
Motion two personality types, duration within specified range; prefers-reduced-motion fallback
Temporary feedback auto-dismiss 2–2.5s; form errors use inline hints

Sources

Parameters extracted from three Douyin videos (2026-10): Ludi "Dissecting big company AI client source code, texture relies on these 5 tricks" "6 hidden ace components", Watermelon "Episode 14: 6 interactions to make AI-built Apps more refined".

落地页质感打磨第2步：高级感 UI 细节