Prompt & style library

A unique fusion of dark aesthetics and candy colors, pairing soft hues like pastel purple and pastel blue with gothic elements such as skulls and crosses. Dark backgrounds with pastel highlights.

StyleKit

A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experien…

StyleKit

The distinctive romantic aesthetics of shoujo manga, featuring screentone texture backgrounds, flower frame decorations, ribbon banner titles, multi-point sparkle effects, lace borders, and heart elements, presented in…

StyleKit

A design style simulating pencil hand-drawing, with irregular line borders, paper texture backgrounds, handwritten font feel, sketch shadows, and doodle decorations, conveying a warm and approachable handcrafted texture.

StyleKit

An optimistic eco-futurism style blending nature and technology in harmonious aesthetics. Organic curves, plant elements, warm gradients, and soft rounded corners. Ideal for eco-friendly, sustainable development, and gr…

StyleKit

A warm and soft dashboard design style with coral/terracotta backgrounds, cream-white cards, and gentle shadows, creating a comfortable and professional data display experience.

StyleKit

Occult aesthetic style with tarot cards, moon phase symbols, crystals, and herbal elements. Deep purple tones paired with golden mystical runes and shimmering stardust effects on dark backgrounds.

StyleKit

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distincti…

Awesome DESIGN.md

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

taste-skill

Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents…

prompts.chat

Game Concept: A puzzle-platformer named "Gravity Shift" where players rotate the entire world to navigate a 3D low-poly labyrinth. The environment is minimalist, using pastel gradients and sharp geometric shapes. Techni…

prompts.chat

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

A component with animated light rays which shine down from above.

Magic UI

An animated pulsating button useful for capturing attention of users.

Magic UI

An animated button with a rainbow effect.

Magic UI

An animated button with ripple useful for user engagement.

Magic UI

An animated ripple effect typically used behind elements to emphasize them.

Magic UI

Animated Scroll Progress for your pages

Magic UI

A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

Magic UI

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

Magic UI

A text component with a video background.

Magic UI

Animated border effect that moves along the edges of its parent container.

Motion-Primitives

A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

Motion-Primitives

Animated scroll progress for your web pages.

Motion-Primitives