A click-to-explore library of 143 front-end visual effects. Each entry links to a faithful live demo and a ready-to-use SKILL.md implementation guide.
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Glassmorphism | Creates translucent panels with blur, light borders, and layered backgrounds. | Premium, modern, SaaS, portfolio | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Dashboards, hero cards, app UIs |
| Frosted Glass Effect | Blurs background content through semi-transparent surfaces. | Clean, elegant, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Navigation bars, modals, floating panels |
| Neumorphism | Uses soft inner and outer shadows to make UI elements look pressed into the surface. | Soft, minimal, tactile | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Mobile UI, controls, settings screens |
| Soft UI | A broader soft-shadow style with gentle contrast and rounded surfaces. | Friendly, calm, minimal | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product cards, forms, wellness apps |
| Claymorphism | Uses rounded, inflated, clay-like shapes with colorful soft shadows. | Playful, casual, friendly | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Kids brands, landing pages, illustrations |
| Layered Depth Cards | Stacks cards with shadows, offsets, and opacity to create spatial hierarchy. | Professional, structured, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Feature sections, pricing, portfolios |
| Floating Panels | Makes interface blocks appear suspended above the page with shadows and motion. | Premium, app-like, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Dashboards, SaaS landing pages |
| Parallax Depth | Moves foreground and background layers at different speeds to create depth. | Immersive, cinematic, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Storytelling pages, hero sections |
| 3D Card Tilt | Tilts cards in response to cursor movement or device orientation. | Interactive, premium, playful | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product cards, portfolios, galleries |
| Perspective Hover | Applies perspective transforms on hover to give elements a 3D angle. | Modern, dynamic, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Cards, buttons, screenshots |
| Depth Shadow Stacking | Uses multiple layered shadows to simulate realistic elevation. | Professional, refined, subtle | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Enterprise UI, cards, modals |
| Inner Glow Panels | Adds internal glow or light bleeding inside panels. | Futuristic, premium, dramatic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Dark UI, AI products, gaming |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Magnetic Hover Effect | Pulls buttons or links toward the cursor for a responsive magnetic feel. | Premium, interactive, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | CTAs, navigation, portfolio links |
| Liquid Button Hover | Animates button backgrounds like liquid filling or flowing. | Playful, creative, energetic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative landing pages, campaigns |
| Ripple Effect | Creates expanding circular waves after clicks or taps. | Familiar, clean, app-like | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Buttons, mobile UI, material design |
| Morphing Button | Transforms a button into another shape, loader, or confirmation state. | Modern, smart, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Forms, checkout, onboarding |
| Cursor Trail | Leaves animated particles, lines, or shapes behind the cursor. | Creative, playful, expressive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Portfolios, gaming, experimental sites |
| Custom Cursor Magnetism | Changes cursor appearance and attraction around interactive elements. | Premium, editorial, experimental | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative agencies, portfolios |
| Elastic Hover | Uses spring-like scaling or stretching when elements are hovered. | Friendly, lively, tactile | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Buttons, cards, playful interfaces |
| Spring Animation | Adds physics-based movement with bounce and settling. | Natural, polished, app-like | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Menus, modals, draggable UI |
| Micro-Interactions | Small response animations that confirm user actions or guide attention. | Professional, refined, usable | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Any production UI |
| Scroll-Triggered Animation | Starts animations when sections enter the viewport. | Modern, polished, narrative | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Landing pages, product pages |
| Smooth Reveal Animation | Fades, slides, or scales content into view smoothly. | Professional, subtle, clean | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Corporate sites, blogs, SaaS |
| Staggered Entrance Animation | Animates groups of elements one after another. | Organized, polished, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Feature grids, lists, galleries |
| Infinite Marquee | Continuously scrolls text, logos, or images horizontally. | Trendy, editorial, energetic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Logo strips, announcements, portfolios |
| Kinetic Typography | Uses animated typography as a central visual element. | Bold, editorial, expressive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero sections, campaigns, videos |
| Text Scramble Effect | Randomizes characters before resolving into readable text. | Techy, cyber, dramatic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI, cybersecurity, futuristic brands |
| Typewriter Effect | Displays text one character at a time. | Techy, simple, familiar | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero copy, terminal UI, demos |
| Hover Distortion | Distorts shapes, images, or text when hovered. | Experimental, artistic, edgy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative portfolios, art sites |
| Button Shine Sweep | Adds a moving highlight across a button surface. | Premium, commercial, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Primary CTAs, pricing pages |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Animated Gradient Background | Moves gradient colors slowly across the page. | Modern, friendly, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero sections, startup landing pages |
| Mesh Gradient | Uses soft blended color blobs to create a rich abstract background. | Premium, trendy, creative | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SaaS, AI, design brands |
| Aurora Background | Simulates northern-light waves and glowing color fields. | Dreamy, premium, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI websites, hero sections |
| Fluid Gradient | Creates organic flowing gradient movement. | Elegant, modern, creative | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Landing pages, creative apps |
| Lava Lamp Background | Animates large organic blobs moving like a lava lamp. | Retro, playful, artistic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Music, kids, creative sites |
| Particle Background | Adds animated dots, particles, or small elements in the background. | Techy, dynamic, immersive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Tech, AI, security, gaming |
| Starfield Background | Creates a moving field of stars or space particles. | Cinematic, cosmic, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Space, gaming, AI, storytelling |
| Interactive Particles | Particles react to cursor movement or clicks. | Interactive, techy, playful | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero sections, demos, portfolios |
| Noise Texture Overlay | Adds subtle grain to reduce flatness and create a tactile finish. | Editorial, premium, subtle | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Premium websites, gradients, dark UI |
| Grainy Gradient | Combines gradients with noise texture for a rich editorial look. | Premium, artistic, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero backgrounds, editorial layouts |
| Animated Blobs | Moves rounded abstract shapes slowly behind content. | Friendly, playful, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Landing pages, education, kids |
| Floating Shapes | Animates decorative shapes around the layout. | Playful, casual, energetic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Startup pages, education, children brands |
| Radial Glow Background | Uses large blurred radial lights to create atmosphere. | Premium, modern, cinematic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI, SaaS, dark interfaces |
| Spotlight Background | Creates a focused light beam or glow behind important content. | Dramatic, premium, focused | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero sections, pricing, product reveals |
| Grid Glow Background | Combines a grid pattern with glowing highlights. | Techy, structured, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Developer tools, AI, cybersecurity |
| Cyber Grid Background | Uses perspective grids, neon lines, and futuristic geometry. | Cyberpunk, techy, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, cybersecurity, futuristic pages |
| Vortex Background | Creates a swirling tunnel or spiral motion effect. | Experimental, intense, sci-fi | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, event pages, experimental visuals |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Parallax Scrolling | Moves background and foreground layers at different scroll speeds. | Immersive, modern, cinematic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Storytelling, product pages |
| Horizontal Scroll Section | Turns vertical scrolling into horizontal movement for a section. | Editorial, modern, immersive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Case studies, galleries, timelines |
| Scroll Snap | Locks scrolling into full sections or cards. | Clean, app-like, structured | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product tours, mobile layouts |
| Scroll Progress Indicator | Shows reading or page progress as the user scrolls. | Useful, professional, subtle | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Blogs, documentation, long pages |
| Sticky Section Reveal | Keeps content fixed while new content reveals around it. | Premium, narrative, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product explainers, portfolios |
| Pinning Scroll Animation | Pins elements while scroll controls animation progress. | Advanced, cinematic, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | High-end landing pages |
| Image Sequence Scroll | Plays a frame-by-frame image sequence based on scroll position. | Cinematic, premium, product-focused | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product reveals, 3D-like demos |
| Scroll-Based Zoom | Zooms images, text, or scenes as the user scrolls. | Dramatic, immersive, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero transitions, galleries |
| Scroll Fade-In | Fades content into visibility as it enters the viewport. | Clean, professional, simple | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Most websites |
| Scroll Blur Reveal | Removes blur as content appears while scrolling. | Premium, cinematic, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero copy, image sections |
| Scroll Text Mask | Reveals text through masks or clipped containers during scroll. | Editorial, polished, creative | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Headlines, storytelling |
| Card Stack Scroll | Stacks cards that move, pin, or peel away during scroll. | Premium, structured, engaging | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Feature explanations, portfolios |
| Timeline Scroll Animation | Animates timeline items as the user moves through history or process steps. | Clear, professional, narrative | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Roadmaps, histories, processes |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Gradient Text | Fills typography with a gradient instead of a flat color. | Modern, premium, trendy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero headlines, CTAs |
| Animated Gradient Text | Moves gradient colors through text over time. | Energetic, modern, expressive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero titles, AI pages |
| Neon Text | Adds glowing outlines or shadows to create a neon sign look. | Nightlife, cyber, dramatic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, events, cyberpunk UI |
| Glitch Text | Creates digital distortion, misalignment, and flickering. | Cyber, edgy, hacker-like | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Cybersecurity, gaming, sci-fi |
| Split Text Animation | Animates words, lines, or letters separately. | Premium, editorial, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero titles, landing pages |
| Text Reveal Mask | Reveals text through clipping masks, often from bottom to top. | Elegant, editorial, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Headlines, case studies |
| Shimmer Text | Moves a subtle shine over text. | Premium, commercial, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | CTAs, badges, hero words |
| Outline Text Hover | Switches between filled and outlined typography on hover. | Editorial, creative, clean | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Navigation, large headings |
| Liquid Text Effect | Makes text appear fluid, wavy, or melting. | Experimental, playful, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative sites, music, art |
| Wave Text Animation | Moves letters up and down in a wave. | Playful, casual, friendly | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Kids, playful brands, loaders |
| 3D Text Extrusion | Creates depth by extending text into 3D space. | Bold, dramatic, retro/futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero headlines, event pages |
| Typographic Clipping Mask | Uses large text as a mask for images, video, or gradients. | Editorial, artistic, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Magazines, portfolios, campaigns |
| Letter Spacing Hover | Animates spacing between letters on hover. | Minimal, elegant, subtle | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Navigation, headings, luxury brands |
| Text Distortion Effect | Warps or bends text through displacement or shader effects. | Experimental, edgy, artistic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative portfolios, event pages |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Image Hover Zoom | Scales an image slightly when hovered. | Clean, familiar, commercial | ProfessionalCasualExoticVisual impactDifficultyPerf cost | E-commerce, blogs, galleries |
| Image Reveal Mask | Reveals images through sliding, expanding, or clipped masks. | Premium, editorial, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Case studies, portfolios |
| Clip-Path Reveal | Uses CSS clip-path to reveal content in geometric or organic shapes. | Creative, modern, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero sections, cards, galleries |
| Before/After Slider | Lets users drag between two versions of an image. | Useful, professional, clear | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Design, restoration, SaaS demos |
| Pixelated Reveal | Transitions from pixelated blocks into a clean image. | Retro, techy, playful | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, AI image tools, portfolios |
| VHS Effect | Adds scanlines, noise, color bleed, and analog distortion. | Retro, nostalgic, edgy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Music, gaming, retro brands |
| Glitch Image Effect | Applies digital distortion, offset channels, or broken-signal animation. | Cyber, edgy, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Cybersecurity, gaming, AI |
| Duotone Image Hover | Applies two-color image treatment on hover. | Editorial, stylish, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Portfolios, blogs, campaigns |
| Parallax Image | Moves image layers or image position based on scroll or cursor movement. | Immersive, modern, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero images, galleries |
| 3D Image Carousel | Displays images in a rotating or perspective-based 3D carousel. | Showy, interactive, dramatic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Portfolios, galleries, product showcases |
| Infinite Image Loop | Continuously scrolls or cycles image strips. | Trendy, dynamic, casual | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Brand strips, galleries, social proof |
| Perspective Gallery | Arranges media in angled 3D perspective. | Editorial, premium, immersive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Case studies, architecture, portfolios |
| Liquid Image Distortion | Warps images like water or liquid when hovered or moved. | Experimental, premium, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative agencies, art, fashion |
| Spotlight Image Hover | Reveals or brightens an area around the cursor on an image. | Premium, interactive, focused | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product images, galleries |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Holographic UI | Uses iridescent gradients, glow, and transparency to simulate holographic surfaces. | Futuristic, premium, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI, Web3, advanced product sites |
| Cyberpunk Neon | Combines dark surfaces, saturated neon, grids, and glow. | Edgy, futuristic, intense | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, cybersecurity, sci-fi |
| Liquid Glass UI | Blends glass blur, transparency, refraction, and fluid motion. | Premium, futuristic, elegant | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Luxury SaaS, AI products |
| Apple Vision Pro Style UI | Uses floating glass panels, spatial layering, blur, and gentle depth. | Premium, clean, spatial | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Modern app UIs, product pages |
| Bento Grid Layout | Uses modular rectangular cards arranged like a clean dashboard. | Professional, modern, organized | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SaaS, feature pages, portfolios |
| AI Glow Interface | Uses soft glowing gradients, radial lights, and dark UI accents. | AI-native, premium, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI tools, developer products |
| Gradient Border Cards | Adds gradient outlines around cards or panels. | Modern, premium, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Pricing, feature cards, SaaS |
| Animated Border Glow | Animates light around card or button borders. | Premium, energetic, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | CTAs, cards, highlighted content |
| Plasma Glow | Uses animated glowing color fields resembling plasma energy. | Sci-fi, intense, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, AI, event pages |
| Energy Orb | Creates a glowing circular object with particles, waves, or gradients. | Futuristic, magical, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI assistants, hero sections |
| Scanner Line Effect | Moves a line across content to simulate scanning. | Techy, security, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Cybersecurity, AI analysis, loading states |
| Data Stream Animation | Shows flowing numbers, lines, or particles as data movement. | Technical, cyber, dynamic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Security, analytics, infrastructure |
| Terminal Typing UI | Simulates command-line text being typed or executed. | Developer-focused, hacker-like, techy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Developer tools, cybersecurity |
| Matrix Rain Effect | Displays falling characters inspired by hacker/cyber visuals. | Cyber, nostalgic, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Cybersecurity demos, gaming |
| Futuristic HUD Interface | Uses rings, grids, panels, and metrics like a sci-fi heads-up display. | Sci-fi, complex, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Gaming, cyber, dashboards |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Skeleton Loader | Shows gray placeholder blocks while content loads. | Professional, practical, familiar | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Apps, dashboards, content feeds |
| Shimmer Loader | Adds moving shine across loading placeholders. | Professional, polished, familiar | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Apps, e-commerce, feeds |
| Morphing Loader | Uses shapes that transform while waiting. | Modern, playful, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Brand loaders, apps |
| Liquid Loader | Uses fluid movement to show loading progress. | Creative, playful, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative products, upload states |
| Page Transition Fade | Fades pages in and out during navigation. | Clean, professional, subtle | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Most websites and apps |
| Page Transition Slide | Slides pages or sections during navigation. | App-like, modern, clear | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SPAs, mobile-like interfaces |
| Circle Wipe Transition | Reveals pages through an expanding circle. | Playful, cinematic, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative pages, route changes |
| Clip-Path Page Transition | Uses CSS clipping shapes to transition between pages. | Creative, premium, dynamic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Portfolios, agencies, campaigns |
| Curtain Reveal | Opens or closes panels like stage curtains. | Dramatic, theatrical, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Launch pages, presentations |
| Route Transition Animation | Animates changes between app routes. | Professional, app-like, polished | ProfessionalCasualExoticVisual impactDifficultyPerf cost | React/Vue/Next apps |
| Preloader Animation | Shows a branded animation before the page becomes ready. | Branded, polished, expressive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Brand sites, heavy pages |
| Logo Reveal Animation | Animates a logo into view through drawing, masking, or motion. | Premium, branded, memorable | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Homepages, intros, launch screens |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| Bento Grid | Organizes content into modular card blocks of different sizes. | Professional, modern, structured | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SaaS feature pages, dashboards |
| Masonry Layout | Arranges items in a Pinterest-like uneven grid. | Casual, editorial, content-heavy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Galleries, blogs, portfolios |
| Hover Flip Card | Flips a card to reveal hidden content on the back. | Interactive, playful, familiar | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Team cards, service cards, quizzes |
| Expandable Card | Expands a card to show more information. | Practical, modern, app-like | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Dashboards, FAQ, products |
| Accordion Cards | Expands one card or section at a time to reduce clutter. | Professional, organized, practical | ProfessionalCasualExoticVisual impactDifficultyPerf cost | FAQ, settings, documentation |
| Stacked Cards | Displays cards layered on top of each other. | Premium, tactile, dynamic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Testimonials, onboarding, mobile UI |
| Swipe Cards | Lets users swipe cards left/right like a deck. | Casual, mobile, interactive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Matching, galleries, onboarding |
| Floating Product Cards | Uses product cards with shadows, depth, and subtle floating motion. | Commercial, premium, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | E-commerce, product showcases |
| Gradient Border Card | Applies a gradient outline around a card. | Premium, modern, clean | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Pricing cards, highlighted features |
| Spotlight Card | Adds a cursor-following glow inside or around a card. | Premium, interactive, modern | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SaaS cards, AI interfaces |
| Hover Glow Card | Adds glow or light bloom around a card on hover. | Modern, premium, techy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Feature cards, dark UI |
| 3D Product Card | Presents a product in a tilted or layered 3D-style card. | Premium, commercial, showy | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product pages, launch sites |
| Card Reflection Effect | Adds a subtle mirrored reflection below or inside a card. | Premium, glossy, dramatic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product visuals, dark UI |
| Card Shine Effect | Moves a specular shine across a card surface. | Premium, polished, commercial | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Credit-card UI, pricing, CTAs |
| Effect | What it does | Personality | Ratings | Best use |
|---|---|---|---|---|
| WebGL Distortion | Uses GPU shaders to warp images, scenes, or transitions. | Advanced, experimental, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative sites, immersive pages |
| Shader Background | Uses fragment shaders to generate animated visual backgrounds. | Technical, artistic, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | AI, gaming, experimental brands |
| Fluid Simulation | Simulates liquid flow and movement, often cursor-reactive. | Experimental, mesmerizing, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Hero backgrounds, creative portfolios |
| Particle Network | Connects animated particles with dynamic lines. | Techy, networked, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Security, SaaS, data products |
| Cursor Fluid Trail | Creates liquid-like motion following the cursor. | Creative, playful, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Experimental landing pages |
| Smoke Effect | Renders drifting smoke or mist using canvas/WebGL. | Atmospheric, cinematic, mysterious | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Events, gaming, cinematic pages |
| Wave Shader | Creates animated wave patterns or water-like displacement. | Elegant, fluid, futuristic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Product pages, hero backgrounds |
| Ripple Shader | Creates water-like ripples from clicks, hover, or motion. | Interactive, premium, fluid | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Image galleries, hero sections |
| 3D Model Viewer | Displays interactive 3D objects in the browser. | Premium, commercial, immersive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | E-commerce, product demos |
| Interactive Globe | Shows a rotating or clickable 3D globe. | Global, techy, premium | ProfessionalCasualExoticVisual impactDifficultyPerf cost | SaaS, logistics, analytics |
| Procedural Noise Background | Generates organic animated textures using mathematical noise. | Artistic, subtle, advanced | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Premium backgrounds, creative UI |
| Audio Reactive Visualizer | Animates visuals based on music, voice, or sound input. | Energetic, musical, immersive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Music sites, live visuals, demos |
| Generative Art Background | Creates abstract visuals algorithmically in real time. | Artistic, unique, exotic | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Creative portfolios, experimental brands |
| Canvas Particle Explosion | Explodes particles outward from a click, logo, or element. | Playful, dramatic, interactive | ProfessionalCasualExoticVisual impactDifficultyPerf cost | Celebrations, gaming, interactions |