Pattern Library

FrontendDesign Patterns

Interactive component patterns used across frankx.ai. Every demo includes the source code — toggle between preview and code with the buttons on each card.

Cursor-Following Glow

Radial gradient follows mouse position inside card

Cursor-Following Glow

Move your mouse over this card to see the glow follow your cursor.

Magnetic Button

Button subtly follows cursor within its bounds

3D Tilt Card

Perspective transforms based on cursor position

3D Tilt

Perspective transform

Hover and move your mouse to see the 3D tilt effect in action.

Shimmer Border

Animated conic gradient border using CSS @property

Shimmer Border

Animated conic gradient border using CSS @property for smooth rotation.

Stagger Grid

Sequential entrance animation with configurable delay

75+

Skills

Agents

35+

Commands

12K+

Songs

70+

Articles

MCP Servers

Pulse Indicators

Status indicators with pulse, ping, and breathe effects

Active

Processing

Breathe

Loading States

Skeleton, shimmer, and dot loading patterns

Skeleton

Shimmer

Dots

Toggle Switch

Accessible toggle with ARIA switch role and focus ring

DisabledARIA switch role + focus ring

Focus Management

Consistent focus rings using purple outline on all interactive elements

Tab through these elements to see focus states:

Inline link

Reduced Motion

All animations respect prefers-reduced-motion media query

prefers-reduced-motion: no-preference

Float animation

Instant (reduced)

tsx

const shouldReduceMotion = useReducedMotion()

<motion.div
  initial={shouldReduceMotion ? false : { opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
/>

Every pattern follows the FrankX design system: dark-first, glass layers, purple focus rings, reduced-motion support.

Design Excellence Design Lab