Prompt & style library

286 hand-picked app briefs, design styles, themes, palettes, fonts and animation patterns — each a detailed prompt you can paste into any AI assistant. Free, no account needed to browse.

Try:

Curated · 286 Everything · 1009Showing the whole library (1009 entries), including short or duplicate prompts.

Full style references only 6

Scroll Based Velocity

Animation

Scrolling text whose speed changes based on scroll speed

Magic UI

Scroll Progress

Animation

Animated Scroll Progress for your pages

Magic UI

Scroll Progress

Animation

Animated scroll progress for your web pages.

Motion-Primitives

Scrollytelling

Style

Scrolling is the narrative timeline. A sticky canvas pins to the viewport while text steps scroll past it, each step triggering a state change — numbers count, shapes morph, layers light up. Information reveals frame by…

Full style reference · 7k chars

StyleKit

Kinetic Typography

Style

Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a sing…

Full style reference · 7k chars

StyleKit

Full Page Scroll

Style

Immersive scrolling experience where each screen fills the entire viewport, switching complete scenes on scroll. Ideal for brand stories, product introductions, and portfolio showcases.

StyleKit

Motion-Driven

Style

Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions. Best for Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative,…

UI/UX Pro Max

Typing Animation

Animation

Characters appearing in typed animation

Magic UI

Launch Keynote

Style

An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas p…

Full style reference · 8k chars

StyleKit

Marquee

Animation

An infinite scrolling component that can be used to display text, images, or videos.

Magic UI

Progressive Blur

Animation

Add a progressive blur effect to scrollable content

Magic UI

Text Reveal

Animation

Fade in text as you scroll down the page.

Magic UI

Infinite Slider

Animation

Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, mar…

Motion-Primitives

Parallax Editorial

Style

Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into…

Full style reference · 7k chars

StyleKit

Horizontal Gallery

Style

A white-cube, curator-style portfolio layout. Borderless large images line up along a horizontal snap-scroll rail; whitespace acts as the gallery wall, numbered hairline captions echo museum labels, and viewing becomes…

StyleKit

Parallax Sections

Style

An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersi…

StyleKit

Micro-interactions

Style

Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive. Best for Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components.

UI/UX Pro Max

Kinetic Typography

Style

Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text. Best for Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages.

UI/UX Pro Max

Parallax Storytelling

Style

Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered. Best for Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns.

UI/UX Pro Max

Android

Animation

A mockup of an Android device.

Magic UI

Animated Beam

Animation

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

Magic UI

Animated Circular Progress Bar

Animation

Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

Magic UI

Animated Gradient Text

Animation

An animated gradient background which transitions between colors for text.

Magic UI

Animated Grid Pattern

Animation

A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Animated List

Animation

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

Magic UI

Animated Shiny Text

Animation

A light glare effect which pans across text making it appear as if it is shimmering.

Magic UI

Theme Toggler

Animation

Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.

Magic UI

Aurora Text

Animation

A beautiful aurora text effect

Magic UI

Avatar Circles

Animation

Overlapping circles of avatars.

Magic UI

Backlight

Animation

A backlight glow effect for videos, images, and SVGs.

Magic UI

Bento Grid

Animation

Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

Magic UI

Blur Fade

Animation

Blur fade in and out animation. Used to smoothly fade in and out content.

Magic UI

Border Beam

Animation

An animated beam of light which travels along the border of its container.

Magic UI

Code Comparison

Animation

A component which compares two code snippets.

Magic UI

Comic Text

Animation

Comic text animation that looks like a comic book text

Magic UI

Confetti

Animation

Confetti animations are best used to delight your users when something special happens

Magic UI

Cool Mode

Animation

Cool mode effect for buttons, links, and other DOMs

Magic UI

Dia Text Reveal

Animation

A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.

Magic UI

Dock

Animation

An implementation of the MacOS dock using react + tailwindcss + framer motion

Magic UI

Dot Pattern

Animation

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Dotted Map

Animation

A component with a svg dotted map.

Magic UI

Flickering Grid

Animation

A flickering grid background made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Floating 3D Particles

Animation

A canvas-based pseudo-3D particle field with perspective projection, continuous rotation, buoyant drift and depth-aware rendering.

Magic UI

Glare Hover

Animation

A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.

Magic UI

Globe

Animation

An autorotating, interactive, and highly performant globe made using WebGL.

Magic UI

Glyph Matrix

Animation

An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.

Magic UI

Grid Pattern

Animation

A background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Hero Video Dialog

Animation

A hero video dialog component.

Magic UI

Hexagon Pattern

Animation

A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Text Highlighter

Animation

A text highlighter that mimics the effect of a human-drawn marker stroke.

Magic UI

Hyper Text

Animation

A text animation that scrambles letters before revealing the final text.

Magic UI

Icon Cloud

Animation

An interactive 3D tag cloud component

Magic UI

Interactive Grid Pattern

Animation

A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

Interactive Hover Button

Animation

A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

Magic UI