Hero architecture
Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.
Style 48 · General · Marketplace (P2P)
Kinetic Typography
Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text. This mock website translates the UI/UX Pro Max style notes into a client-ready landing/dashboard hybrid with its own palette, typography, chart module, and component system.
Live product surface
NOVA Marketplace OS
Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
90%
style fit score
Effects
@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
A full-page mock website in this style
Component language
@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing
Best-fit market
Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
Palette used
Trust purple + transaction green [Accent adjusted from #22C55E for WCAG 3:1]
Typography pairing
Accessibility First
Atkinson Hyperlegible / Atkinson Hyperlegible
Designed for maximum legibility. Excellent for accessibility.
Implementation checklist
- ☐ Text animations smooth
- ☐ Prefers-reduced-motion respected
- ☐ Fallback for no-JS
- ☐ Mobile performance ok
- ☐ Typing effect timed
Chart module: Streaming Area Chart
Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance
Interaction spec
Accessibility: ❌ Poor (motion) · B
Performance: ⚠ Moderate
Mobile: ✓ Good
Avoid: Long-form content, accessibility-critical, data interfaces, forms, elderly users
Visual system samples
Gallery rhythm
Conversion section
One primary action, one secondary proof path, clear visual hierarchy, focus states, 44px+ hit targets, and token-driven colors.
Primary CTA