Skip to content
OTF Kit logoOTF Kit

Patterns

Motion, backgrounds, and engagement effects — vibe over UI. 14 web and 55 mobile patterns. Free and open source, with live previews.

Gradient Background

Display

Static gradient backgrounds in multiple presets — for hero sections and banners.

Animated Gradient

Display

Slow-drifting animated gradient mesh for ambient hero backgrounds.

Dotted Background

Display

Dotted-grid background pattern — subtle texture without competing for attention.

Noise Background

Display

Subtle noise texture overlay for added depth on flat surfaces.

Hero Shader

Display

WebGL shader hero background with motion control and reduced-motion support.

Fade In

Display

Fade-in entrance primitive with configurable delay and duration.

Slide In

Display

Slide-in entrance primitive from any edge — top / right / bottom / left.

Scale In

Display

Scale-up entrance primitive for cards, badges, and modal content.

Stagger

Display

Staggered children animation primitive for animating lists and grids.

Ripple

Display

Material-style ripple effect on press — for buttons and tappable surfaces.

Reveal

Display

Scroll-triggered reveal animation primitive for content-rich pages.

Transition

Display

Smooth transition primitive for animating value changes between states.

Onboarding Checklist

Feedback

Step-by-step onboarding checklist with progress tracking and completion state.

Intro Disclosure

Feedback

First-time-user disclosure card with multi-step walkthrough.

Showing 14 of 14 web patterns

Need more than components?

Full-stack kits.
Pay once, own the code.

SaaS Dashboard and Fitness include authentication and a database. Arcade is browse-first with a local demo session and no backend sign-in by default. Booking is in Preview; Marketplace is coming soon and not currently sold. The Bundle includes the three live kits.

Everything Bundle — $149See full pricing

Get the free AI configs pack

AI configs in every kit: CLAUDE.md, .cursorrules and task prompts. Drop them in and your AI tool instantly understands your project.

No spam. Unsubscribe any time.

Prefer the free SDK? Star it on GitHub →