1---2name: premium-frontend-ui-23description: Craft immersive, high-performance web interfaces with advanced motion, typography, scroll-driven interactions, responsive polish, and product-specific visual direction. Use this skill when the user asks for premium frontend UI, sophisticated animations, Awwwards-style components, high-end landing pages, layout polish, or high-end visual design implementation.4---56# Premium frontend UI78Transform a functional frontend request into an immersive, high-performance interface by choosing a clear visual identity, layering motion intentionally, and enforcing accessibility and performance constraints before delivery.910## When to invoke1112- "Build a premium landing page."13- "Create an Awwwards-style component."14- "Make this UI feel high-end and immersive."15- "Add sophisticated scroll-driven interactions."16- "Polish this frontend layout and motion system."1718## Creative foundation1920Commit to one visual identity before writing layout code; do not default to generic neutral UI.2122| Direction | Use when | Design decisions |23| --- | --- | --- |24| Editorial Brutalism | Content needs authority, contrast, and sharp hierarchy. | High-contrast monochrome, oversized typography, raw grid structures, sharp rectangular edges. |25| Organic Fluidity | Brand should feel soft, expressive, and tactile. | Soft gradients, deeply rounded corners, glassmorphism overlays, bouncy spring-based physics. |26| Cyber / Technical | Product needs precision, systems, data, or developer energy. | Dark mode dominance, glowing neon accents, monospaced typography, rapid staggered reveal animations. |27| Cinematic Pacing | Storytelling and atmosphere matter more than density. | Full-viewport imagery, slow cross-fades, negative space, scroll-dependent storytelling. |2829## Structural requirements3031| Layer | Required implementation | Premium failure to avoid |32| --- | --- | --- |33| Entry sequence | Add a lightweight preloader or initialization state for fonts, first images, or 3D models, then transition with a split-door reveal, scale-up zoom, or staggered text sweep. | Blank initial screen or abrupt content pop-in. |34| Hero architecture | Use full-bleed containers such as `100vh` or `100dvh`; break headlines into word or character spans for cascading entrance animations. | A centered card that could belong to any SaaS template. |35| Depth | Add subtle floating elements, background clipping paths, layered media, or atmospheric surfaces behind primary copy. | Decorative shapes unrelated to hierarchy. |36| Navigation | Use sticky headers that react to scroll direction, hiding on scroll down and revealing on scroll up. | Standard static navbars with no contextual behavior. |37| Rich hover | Use previews, mega-menus, or product-relevant hover states where they help choice. | Hover decoration that reveals nothing useful. |3839## Motion design system4041| Pattern | Implementation guidance | Guardrail |42| --- | --- | --- |43| Scroll-driven narratives | Use GSAP ScrollTrigger or framework-equivalent timelines to tie progress to pinned containers, reveals, and transforms. | Do not make essential content inaccessible without scroll scripting. |44| Horizontal journeys | Translate vertical scroll into horizontal gallery or showcase movement only for content that benefits from sequencing. | Preserve keyboard and reduced-motion alternatives. |45| Parallax mapping | Assign different scroll speeds to background, midground, and foreground elements with subtle values. | Avoid nausea-inducing large deltas. |46| Magnetic components | Calculate pointer distance and move buttons slightly toward the cursor. | Limit to `@media (hover: hover) and (pointer: fine)`. |47| Custom cursor | Follow the pointer with interpolation or `lerp` only when it clarifies interaction. | Never replace native cursor affordances for text input. |48| Dimensional hover | Use `scale`, `rotateX`, and `translate3d` for tactile weight. | Avoid layout-affecting hover changes. |4950## Typography and texture5152- Use extreme but controlled type hierarchy: fluid headlines with `clamp()` up to `12vw`, crisp body copy around `16px-18px` minimum.53- Prefer specific variable fonts or premium typefaces over unconsidered system defaults.54- Add atmospheric CSS/SVG noise overlays with `mix-blend-mode: overlay` and opacity around `0.02 - 0.05` to avoid digital sterility.55- Use `backdrop-filter: blur(x)` with thin semi-transparent borders for frosted-glass depth only when the surface has content or hierarchy value.56- Make headings, labels, and calls to action product-specific; never ship placeholder metrics or vague "learn more" clusters when concrete content exists.5758## Performance and accessibility guardrails5960| Guardrail | Apply it |61| --- | --- |62| Hardware acceleration | Animate only `transform` and `opacity`; avoid animating `width`, `height`, `top`, or `margin`. |63| Render optimization | Apply `will-change: transform` only shortly before expensive motion and remove it after animation. |64| Touch degradation | Wrap custom cursor and heavy hover logic in `@media (hover: hover) and (pointer: fine)`. |65| Motion preference | Wrap heavy continuous animation in `@media (prefers-reduced-motion: no-preference)`. |66| Accessibility | Preserve semantic structure, focus order, contrast, keyboard behavior, touch targets, zoom readability, and reduced-motion alternatives. |6768## Implementation ecosystem6970| Target | Preferred tools |71| --- | --- |72| React / Next.js | Framer Motion for layout transitions and spring physics; Lenis (`@studio-freight/lenis`) for smooth scrolling; React Three Fiber (`@react-three/fiber`) for WebGL or 3D interactions when requested. |73| Vanilla / HTML / Astro | GSAP (GreenSock Animation Platform) for timeline sequencing; Lenis via CDN for smooth scrolling when appropriate; SplitType for accessible typography chunking. |7475## Gotchas7677- **Beautiful stutter is still failure**: composited animation and reduced-motion support are mandatory, not polish.78- **Premium is not more decoration**: every badge, blur, grain, shadow, and motion cue must communicate state, hierarchy, or brand intent.79- **Scroll hijacking can harm users**: use smooth scrolling conservatively and test keyboard, touch, and reduced-motion paths.80- **Generic hero sections erase identity**: choose a direction and encode it in typography, density, spacing, motion, and content.8182Aim for award-level, top-tier craft without sacrificing engineering. industry-standard libraries are acceptable, but still remove `will-change` post-animation, tune parallax scroll-speeds, keep scroll-smoothed behavior accessible, and prefer ultra-thin borders only when they reinforce hierarchy.8384## Output template8586```markdown87## Premium frontend UI result8889**Status:** implemented | designed | blocked90**Visual direction:** <Editorial Brutalism | Organic Fluidity | Cyber / Technical | Cinematic Pacing | custom>91**Target:** <framework/page/component>9293| Layer | Decision | Evidence in implementation |94| --- | --- | --- |95| Entry | `<preloader or initialization>` | `<file/component>` |96| Hero/layout | `<structure>` | `<file/component>` |97| Motion | `<timeline/interactions>` | `<file/component>` |98| Typography/texture | `<type and surface rules>` | `<file/component>` |99| Performance/accessibility | `<guardrails>` | `<checks>` |100101**Validation**102- Responsive breakpoints: <checked/not checked>103- Reduced motion: <checked/not checked>104- Keyboard/focus: <checked/not checked>105- Performance risk: <notes>106```107108## Quality gate109110- [ ] A strong visual identity was chosen before layout code.111- [ ] Entry sequence, hero architecture, depth, navigation, and hover behavior were considered or explicitly scoped out.112- [ ] Motion uses `transform` and `opacity` instead of layout-triggering properties.113- [ ] Custom cursor, magnetic hover, and heavy animations are gated for pointer and reduced-motion preferences.114- [ ] Typography uses fluid hierarchy and product-specific content rather than generic copy.115- [ ] Accessibility semantics, focus order, contrast, touch targets, zoom, and reduced-motion behavior were checked.116- [ ] The final output reports implementation files and validation evidence.117118## References119120- [Author profile](https://github.com/utkarsh232005)
paulasilvatech