Skip to content
Componentes
Menu
ComponentsVisual dictionaryGuidesHow it worksFAQPortuguêsSign inBuy

Visual dictionary

Do not know the effect's name? Start here.

This dictionary maps everyday descriptions, such as “a background that moves when I hover” or “text that scrambles before it appears”, to the technical name of the effect and to the THM Componentes components that do it. Use the technical name in your request to your AI and the result improves right away.

Visual dictionary

How to describe an effect to your AI when you do not know its name

  1. Say what moves and how“The letters appear one by one”, “the background ripples slowly”, “the image breaks into particles”. Motion and rhythm say more than adjectives.
  2. Say what triggers itHovering, scrolling, clicking, loading the page or nothing at all (the effect runs on its own).
  3. Say where it goesHomepage hero, main button, pricing card, login screen. The placement defines the acceptable size and weight.
  4. Name a reference“Like the iPhone Dynamic Island”, “like Instagram stories”. Familiar references shorten the path.
  5. Ask for quality tooBrand colors, a static version for reduced motion, good behavior on phones and no heavy loading.

Visual dictionary

From the way you describe it to the technical name

Backgrounds and atmospheres

“a background that moves when I move my mouse”

Interactive background (cursor-reactive). An animated backdrop that responds to the pointer: ink that spreads, a grid that lights up, particles that scatter or a flock that steers away. It suits product and portfolio heroes. Phones have no cursor, so plan an automatic motion or use touch as the trigger.

“a hero background that reacts to the cursor”; “a background effect that follows the mouse”; “make my homepage background respond when people move the mouse”

“that background with colorful light rippling, like the northern lights”

Aurora background (animated gradient). Bands of gradient light drifting slowly behind the headline, like the aurora borealis. The CSS version stays light and fits SaaS heroes and login screens; the volumetric WebGL version, with stars and mountains, should load on demand. Keep enough contrast for the text on top.

“a northern lights background for my landing page”; “an aurora borealis effect at the top of my site”; “an animated blue and purple gradient behind the headline”

“a background with colors slowly blending, like a living gradient”

Mesh gradient (animated gradient mesh). Several color points blend and drift into an organic gradient, sometimes with film grain or an iridescent sheen. It gives covers, call-to-action sections and login screens a refined mood. Pick close tones so text stays readable, and pause it for people who prefer reduced motion.

“that colorful gradient with a grainy film texture”; “a holographic background that keeps shifting”; “a moving gradient that will not slow the site down”

“a background with tiny dots floating, like dust in the air”

Particles background. Loose dots that float, swirl into a whirlpool, draw currents or fall like snow, adding depth behind the content. Options range from light canvas versions to hundreds of thousands of GPU particles. More particles cost more on phones, so scale the count to the screen size.

“particles that move when I move the mouse”; “falling snow on my website background for Christmas”; “a swirl of neon particles behind the headline”

“a dark background with little stars falling for the top of my site”

Starfield (animated starry sky). A night sky with layered stars drifting in parallax, shooting stars streaking diagonally or twinkling sparkles. It fits launches, login screens and sections about where a brand is heading. CSS and canvas versions are light; avoid fast streaks behind long paragraphs.

“a starry sky background that does not feel heavy”; “a meteor shower behind my headline”; “twinkling stars behind the login screen”

“that jump to light speed effect, like a spaceship going into hyperspace”

Warp speed (hyperspace effect). Streaks of light bursting from the center of the screen or rushing through a perspective tunnel to suggest acceleration. It suits launches, events and products that want to feel fast. Fast full-screen motion can bother people, so offer a still version for reduced motion.

“stars flying toward me, like traveling through space”; “a night highway with car lights speeding by”; “a light tunnel behind my main pricing card”

“a dark, dramatic background, like a scene from a sci-fi movie”

Shader background (dramatic WebGL scene). A scene rendered on the GPU: a black hole with a ring of light, a portal with glowing rings and crystals, storm clouds split by lightning or any ShaderToy shader. It grabs attention in event openers and AI launches. It is heavy, so load it when the section appears and keep a static fallback.

“a spinning black hole background behind the headline”; “a dark sky with lightning flashing for a launch page”; “a glowing portal in the middle of the screen for an event”

“a subtle grid background, like graph paper”

Grid background (grid or dot pattern). A pattern of lines, dots or stripes that gives features sections and developer sites a technical texture. Versions range from static to squares that flicker, cells that light up under the cursor or blocks falling like a game. Keep the pattern low contrast so it never competes with the content.

“a dotted paper background behind the headline”; “a grid that lights up where I hover”; “a background with very subtle diagonal stripes”

“colorful waves moving behind my site headline”

Wavy background (animated waves). Wavy bands in constant motion: blurred neon lines, layered ribbons with shadows or a silk fabric swaying. They work in heroes for health, fashion and tech brands. Shader versions are heavier; slow the motion down so the background never pulls attention from reading.

“a background with colorful ribbons waving”; “a dark rippling satin background for a luxury site”; “layered paper cut waves, like a collage”

“an ink-in-water effect that follows the mouse”

Fluid simulation. A liquid simulated on the GPU: the cursor injects color and velocity that spread into swirls, like ink in water or smoke. It can live in the hero background or act as a mouse trail across the whole site. It is heavy, so turn it off on weak devices and for reduced motion.

“colorful smoke that follows the cursor”; “a liquid background that mixes colors behind the headline”; “colors flowing and swirling like watercolor”

“blobs that join and split apart like a lava lamp”

Metaballs (merging blobs). Liquid shapes that merge when they touch, with volume and shine, like a lava lamp. The idea shows up in playful backgrounds, chrome blobs that react to the cursor and words that melt into each other. It suits wellness and tech brands; limit the number of blobs on phones.

“liquid drops that follow the mouse in the background”; “a colorful blob that changes shape on its own”; “a gooey liquid effect that sticks together”

“a background with that moving swimming pool light reflection”

Water effect (caustics and ripples). It recreates water: the web of light on a pool floor (caustics), ripples the cursor makes over a photo, a 3D ocean at sunset or a page wobbling as if underwater. It suits spas, travel and drinks brands. Simulated versions are heavy and need a static fallback image.

“a photo that ripples like water when I move the mouse”; “a 3D sea with waves and sun reflections at the top of the site”; “a page that wobbles as if it were underwater”

“a lamp light turning on above my headline”

Lamp effect (light beam header). A cone of light falls from a glowing line onto the headline, sometimes with sparkles twinkling underneath. It opens dark sections and launches without any 3D. It is built from gradients and stays light; it works with dark backgrounds and short titles.

“a neon line with a glow falling over the text”; “a spotlight at the top of a dark hero”; “a light beam shining on the product name”

Text and typography

“a headline that types itself out with a blinking cursor”

Typewriter effect (typing animation). Letters appear one by one as if someone were typing, with a blinking cursor; the effect can delete and type a new word in place. It works for headlines, mock chats and command line demos. Reserve room for the longest phrase so the layout does not jump while the text grows.

“a typing effect at the top of my site”; “a phrase that types, deletes and writes something else”; “fake someone typing a message on my landing page”

“text that scrambles and then forms the word”

Text scramble (decode effect). Random characters flicker until they settle into the final phrase, like code being cracked. It fits cybersecurity, tech brands and menu hovers. Use a monospaced font or a fixed width so the text does not shake, and give screen readers and reduced-motion users the finished phrase.

“a hacker-style headline that decrypts itself”; “random letters that gradually become the real sentence”; “a menu link that scrambles its letters on hover”

“a word that keeps changing in the middle of my headline”

Rotating words (word rotator). A fixed sentence with one word that changes every few seconds, by sliding, by a box that resizes or by a liquid morph where one word melts into the next. It shows several audiences or benefits without extra lines. Keep the list short and give each word enough time to be read.

“a headline that cycles through different words by itself”; “a word that melts and turns into another word”; “a sentence where the profession keeps switching: doctors, lawyers, dentists”

“a number that counts up to the total when it appears on screen”

Count up animation (number ticker). The number starts at zero and runs to the final value as it scrolls into view, either smoothly or with rolling digits like an odometer. It highlights results, customers served and dashboard metrics. Format thousands and currency for the locale and show the final value right away for reduced motion.

“an animated counter for how many customers we served”; “a number that rolls like a car odometer”; “company stats with numbers climbing to the final value”

“text that lights up word by word as I scroll down the page”

Scroll text reveal (word by word). A large sentence starts faded or blurred, and each word gains color and focus as the visitor scrolls, as on Apple product pages. It guides the reading of manifestos, mission statements and about sections. Prefer CSS scroll-driven animations and keep the text readable without them.

“gray text that slowly turns black on scroll”; “a company manifesto coming out of a blur as I scroll”; “blurred words with one in focus at a time”

“a headline that appears letter by letter when the page opens”

Text reveal (headline entrance animation). The headline enters in sequence: lines rising from behind a mask, letters appearing one by one, text coming out of a blur or a color bar sliding away to reveal it. It gives heroes and section titles an editorial finish. Keep the entrance short, under a second.

“text that slides up line by line, like film credits”; “a headline revealed by a color block sliding away”; “a sentence that appears blurry and then comes into focus”

“text and blocks that animate in as I scroll down the page”

Scroll reveal (animate on scroll). Each block enters as it reaches the viewport: it rises with a fade, comes out of a blur, gets revealed by a color bar or arrives item by item in a list. It adds rhythm to long landing pages without changing the content. Use small offsets and make sure everything shows even if JavaScript fails.

“elements fading in when the section comes into view”; “a list that animates in one item at a time”; “an entrance animation like the Apple website”

“a highlighter pen effect sweeping across part of a sentence”

Animated highlight (marker effect). A band of color fills the background of a word or phrase, as if someone were marking it live; variations use an underline that grows. It emphasizes benefits, numbers and key lines in proposals and articles. Pick a color that keeps text contrast and highlight no more than one phrase per block.

“highlight a word in my headline like a marker pen”; “that yellow highlight that grows behind the words”; “an animated highlight for key lines in a blog post”

“menu letters that roll up when I hover over them”

Letter swap (rolling text hover). On hover, the letters of a link or button roll up and back in sequence, flip like cubes, swap for random characters or gain weight; an animated underline is the quietest version. It gives menus and footers an agency feel. Keep the text readable and keyboard focus visible.

“a link with a vertical letter swap on hover”; “letters that spin in 3D when I hover”; “a line that shows up under the link on hover”

“a headline where the letters get bolder when I hover”

Variable font animation. Variable fonts change weight, width or slant continuously, so each letter can thicken near the cursor, ripple over time or pulse in sequence. It brings type-only heroes and editorial sites to life. It needs a variable font with the right axes, and the only extra weight is the font file.

“a word that seems to breathe at the top of my site”; “letters turning bold in a wave”; “typography that reacts as the cursor gets close”

“a shine passing over the letters of my text”

Shimmer text (text shine effect). A light gradient sweeps across the letters now and then, like the old slide to unlock; variations scatter sparkles around the word or cycle colors letter by letter. It works for new feature badges, loading states and short highlights. On long text it gets tiring, so keep it to a few words.

“a new feature badge with light running across the text”; “a word with little stars sparkling around it”; “a headline word with letters that keep changing color”

“a headline with chunky letters and a colored cartoon shadow”

3D text (layered text shadow). Stacked or striped shadows give text volume without real 3D, with a sticker, comic book or retro poster look; some versions wobble slightly. It fits promotions, youth events and campaign titles. Use it only on large words and check readability over colored backgrounds.

“text that looks like a sticker for a promo”; “a headline with a shadow made of diagonal stripes”; “letters with a black outline and a yellow shadow”

“text with a video playing inside the letters”

Knockout text (video or masked text). The letters become windows: a video or image shows only inside them, or a giant outline lights up wherever the cursor moves. Another variation opens an image between two words of the headline. It needs big, bold letters; keep the real text in the HTML for search and accessibility.

“the brand name in huge letters with product shots inside”; “giant outlined text that lights up with the mouse”; “an image that appears in the middle of the headline”

“text that shakes and flickers like a broken screen”

Glitch effect (digital distortion). It mimics a bad signal: text or an image jitters, splits into strips and separates its color channels into red and blue, known as chromatic aberration. It gives games, tech events and urban campaigns a cyberpunk mood. Use short bursts rather than a constant loop, and avoid fast flashes.

“an image that glitches like a broken TV on hover”; “a headline with a signal glitch like a hacker movie”; “colors that split apart when I hover over the headline”

Special effects

“a light running around the border of a card”

Border beam (animated glowing border). A spot of light travels around the outline of a card, button or input, or the whole border glows with a neon gradient that slowly rotates. It highlights the recommended plan, an offer or the main search without making the element bigger. Use it on one item per screen; several at once compete for attention.

“a glowing neon border around my search field”; “a light circling the edge of my top-selling plan card”; “a card whose border lights up in a colorful gradient”

“confetti raining down when someone completes a purchase”

Confetti (celebration effect). Colorful pieces burst from a point or fall from the top of the screen to celebrate an action: a finished purchase, a completed sign-up, a goal reached. It reinforces the positive moment on thank you pages and in onboarding. Fire it once per action, keep it short and skip it for reduced motion.

“celebrate when a customer finishes signing up”; “a button that shoots confetti when clicked”; “paper confetti falling on screen when a goal is reached”

“a scratch card on my site to reveal a discount coupon”

Scratch card (scratch to reveal). A layer people scratch away with a finger or the mouse to uncover what sits underneath, such as a coupon, a prize or an offer. It works for seasonal campaigns, giveaways and Black Friday. Reveal everything once part of it is scratched, and add a button for keyboard users.

“a card people scratch to see their prize”; “a scratch effect to uncover a hidden offer”; “a lottery-style scratch card on mobile”

“a card with a frosted glass effect over the background”

Glassmorphism (frosted glass effect). A translucent surface that blurs whatever passes behind it, with a light edge and a soft sheen, used on cards, sticky menus and modals. Progressive blur grows gradually toward an edge instead of cutting off. Check text contrast over busy backgrounds; heavy blur can lag on older phones.

“a transparent sticky menu with a blurred background”; “a photo that gets blurry at the bottom so I can put text on it”; “an iPhone-style blur that gets stronger toward the edge”

“that new Apple liquid glass look on top of an image”

Liquid glass (Apple-style glass). The next step after frosted glass: besides blurring, the surface refracts and bends the background at its edges, with highlights and slight color dispersion. It shows up in navigation bars, floating cards and lenses that follow the cursor. SVG filters and WebGL cost more, so test in Safari and on phones.

“a menu that looks like real glass, not just blur”; “a glass lens that follows the cursor and bends the photo”; “a transparent card that warps the background at its edges”

“animated lines connecting integration icons to my logo”

Animated beam (connecting lines). Curved SVG lines link boxes or icons, and a glow travels along each one like data in transit. It visually explains integrations, data flows and product architecture on SaaS landing pages. Keep the connections few and recalculate the curves when the layout changes on phones.

“show that my app connects to lots of tools”; “a beam of light running between two cards”; “a diagram with curved lines and a glow traveling through them”

“apply a shader effect to my whole site, not just to an image”

Shader over HTML (HTML in Canvas). Live HTML is drawn into a texture and processed by a shader, so text and buttons can ripple like water, catch fire, fold like fabric, bend with scrolling or turn into characters while staying clickable. It relies on an experimental browser API; treat it as a demo and keep the normal page as a fallback.

“a page that warps when I scroll fast”; “text catching fire with smoke and sparks”; “run ShaderToy code on top of my page content”

“a 3D object made of little letters spinning at the top of my site”

ASCII art (character rendering). A 3D scene, or the page content itself, is drawn with text characters, like old terminals, and moves in real time. It fits cybersecurity, developer products and tech events. Use low-contrast tones so it does not tire the eyes, and keep the real content accessible underneath.

“a hacker terminal effect with a 3D shape in the middle”; “turn my page into ASCII art”; “an old computer look for a tech website”

Interaction and physics

“things that fall and can be dragged around with the mouse”

UI physics (gravity and springs). Elements with real physics: tags that fall and pile up, cards hanging on strings that swing, spheres the cursor pushes and shapes that stretch like springs. People can drag and throw them. It suits services and skills sections; keep the same list as plain text for screen readers.

“service tags dropping onto the screen”; “little cards hanging on strings that swing with the mouse”; “elements with a springy, jelly-like feel”

“cards I can swipe left and right like a dating app”

Swipe cards (swipeable card stack). A stack of cards where the top one is dragged and thrown based on gesture speed, springing back to the pile if the swipe is short. It works for testimonials, case studies, onboarding and quick choices on mobile. Add previous and next buttons for mouse and keyboard users.

“a Tinder-style card swipe for my website”; “a stack of photos you can flick away with your finger”; “show testimonials one at a time by swiping like cards”

“a slider that stretches when I pull it past the end”

Elastic slider (springy range slider). A range slider whose track stretches like rubber past its limit and springs back, with the thumb squashing as it moves. There is also a balance slider that splits a value between two sides with percentages. Use it for price filters, simulators and volume, and keep keyboard control.

“a volume bar with a rubbery elastic effect”; “a bar to choose the ratio between two things”; “a value control that feels satisfying to drag”

3D and space

“a spinning globe with lines connecting cities”

3D globe with arcs (connections globe). A dotted globe that spins and draws animated arcs between cities, like flight paths or network traffic; the flat version is a dotted world map with pulses. It shows global presence, offices and product reach. The WebGL globe is heavy, so load it on demand and keep a fallback image.

“a 3D world map with arcs to show our global reach”; “that dotted globe with flight paths between countries”; “a globe I can drag around with the mouse”

“a 3D image carousel that spins when I drag it”

3D carousel (cylinder carousel). Images arranged around a cylinder, a cube or a circle that rotate by dragging, with inertia or on their own, sometimes with a floor reflection. It works for portfolios, product showcases and case studies. The CSS 3D version is light; add arrows and keyboard navigation besides dragging.

“a ring of photos you can rotate with your finger”; “a 3D cube with photos that turns when I drag it”; “photos spinning in a circle in the middle of the page”

“a curved photo gallery, kind of like a tunnel, that moves as I scroll”

Immersive 3D gallery (tunnel or infinite grid). Images form a 3D hallway, a curved strip or an endless grid that people travel by scrolling or dragging, with inertia. It gives portfolios, studios and project archives an award-site feel. Use compressed images and load on demand, since many textures are on screen at once.

“an infinite image tunnel for my portfolio”; “a project wall I can drag in any direction”; “photos passing on the walls as if I were walking through a museum”

“integration icons circling around my app logo”

Orbiting icons (icon cloud). Icons or logos spin in rings around a central element, or form a 3D sphere that rotates and reacts to the cursor. It shows integrations, tech stacks and partners without a dry list. Limit the number of icons and pause the rotation for people who prefer reduced motion.

“a 3D cloud of icons with the technologies I use”; “logos spinning in rings, each one going a different way”; “an orbiting planets effect to show our tools”

“show my product in 3D and let customers change its color”

3D product configurator. A 3D model people rotate with the mouse or a finger while choosing color and finish, with the price updating instantly. It removes doubts in e-commerce, custom merch and launches. It needs a light model and on-demand loading; show a still photo while the 3D loads.

“spin the product 360 degrees on the sales page”; “customize a bottle by picking color and finish”; “show the product from several angles”

“an image that waves like a flag in the wind”

Cloth simulation. A mesh with fabric physics flutters in the wind and can be pulled with the mouse, carrying along the image or content applied to it. It suits campaigns, events, fan pages and fashion brands. It is heavy, so use it on one featured piece and freeze it for reduced motion.

“a fabric banner rippling at the top of a campaign page”; “a photo fluttering like a hanging canvas”; “a page that ripples like cloth in the wind”

“a shiny liquid 3D shape spinning at the top of my site”

3D blob (liquid WebGL object). An abstract 3D object made of chrome, glass with smoke inside or an iridescent surface that morphs, spins and reacts to the cursor; the same finish works on a logo. It is the centerpiece of tech and AI heroes. It needs WebGL and a decent GPU, so keep a static image for weak phones.

“a drop of mercury moving at the top of my site”; “a glass ball with colorful smoke swirling inside”; “my logo with a liquid metal effect”

Images and media

“Instagram-like stories on my website”

Stories (Instagram-style viewer). Vertical screens that advance on their own, with progress bars at the top, taps on the sides to skip, press and hold to pause and swipe to close. It works for product news, case studies and mobile onboarding. Keep each screen short, add captions and allow keyboard navigation on desktop.

“vertical cards that play by themselves with little bars at the top”; “tap the side to skip and hold to pause”; “product updates in a story format”

“show my app screenshot inside an iPhone”

Device mockup (phone or browser frame). An SVG or CSS frame around a screenshot, such as a phone, a browser window or a 3D book cover, sometimes tilted and straightening as you scroll. It makes screenshots look polished on landing pages, proposals and portfolios. Use crisp images and alt text that describes the screen.

“put my web app screen inside a browser window”; “show my ebook cover in 3D on the landing page”; “an app screenshot that straightens as I scroll”

“a photo that turns into particles when I hover over it”

Particle image (image to particles). The image, logo or text is made of thousands of dots that flee the cursor and spring back; variations disintegrate the photo into dust with a glowing edge, shatter the text into shards or morph the cloud into other shapes. It works well in brand heroes; use fewer dots on phones.

“a logo made of tiny dots that run from the cursor”; “a photo that crumbles into dust, like a superhero movie”; “text that breaks into pieces when I click and rebuilds itself”

“a photo that turns into another one on hover, like it is melting”

Image transition (shader displacement). Switching between two images gets a transition: a liquid WebGL distortion, ripples, pixels, burning paper or a simple full-screen slide, on hover or in a slideshow. It is common in agency portfolios and in real estate or travel banners. Preload the next image and keep arrows and keyboard control in the slideshow.

“a slideshow with a burning paper transition”; “big photos changing by themselves at the top of my site”; “portfolio cards that swap the picture with a liquid effect”

“a photo with that old newspaper dot effect”

Halftone (dot screen effect). The photo is redrawn as halftone dots, like newspaper printing, or as few-color dithering with a pixel art feel. Some versions add a magnifier that shows the original or a scan that reveals the photo. It gives an editorial, retro look; check the result on small screens.

“a pixelated image like an old video game”; “a pop art dotted photo”; “a photo that appears with a scanner wave passing over it”

“a nice video player with chapters and captions”

Custom video and podcast player. A custom player instead of the browser controls: thumbnail previews on the progress bar, chapters, captions, playback speed and keyboard shortcuts; for podcasts, a clickable transcript follows the speech. It suits company videos, courses and podcasts. Keep controls large on phones and captions easy to turn on.

“a podcast player where the transcript follows the speech”; “a video with a thumbnail when I hover the progress bar”; “a player with keyboard shortcuts for an online course”

“compare before and after by dragging a line across the photo”

Before and after slider (image comparison). Two overlapping images or pieces of content, with a divider people drag to reveal one or the other; variations reveal through a mask that follows the cursor. Clinics, renovations, site redesigns and photo retouching use it a lot. Support touch dragging and arrow key control.

“show treatment results with before and after photos”; “compare the old site with the new one on the same screen”; “a cursor that reveals the other image underneath”

“a magnifier to see product photo details when I hover”

Image magnifier (zoom on hover). A magnifying circle follows the cursor over the image, or a side panel shows the enlarged detail; on phones, pinch and double tap handle the zoom. It is essential for online stores, floor plans and technical photos. Load a high-resolution image only for the zoom, on demand.

“zoom into the image when I hover over it”; “a product gallery with thumbnails and a magnifier”; “a magnifying circle that follows the mouse over the photo”

“a Pinterest-style photo gallery with images of different heights”

Masonry gallery (column layout). Images fit into columns without gaps, each keeping its own height, like a photo wall. With animated category filters and a lightbox on click, it suits portfolios, archives and showcases. Set image width and height so the layout does not jump while they load.

“a photo wall in columns with no empty space”; “a portfolio with buttons to filter by category”; “click a photo and it opens big over a dark background”

“photos side by side that grow when I hover over them”

Hover gallery (expanding images and captions). The photo under the cursor widens while the others shrink, or gets a caption that slides in from the side the mouse came from; variations fan photos out from a badge or a stack. It works for portfolios, team pages and menus. On phones, swap hover for tap.

“an accordion gallery of strips that widen on hover”; “team photos that show name and role on hover”; “a little folder with photos that pop out when I hover”

Cards and surfaces

“a card that tilts in 3D following the mouse”

3D tilt card (tilt on hover). The card rotates slightly in perspective toward the cursor, with a shadow and a light glare that follow; variations lift inner layers or add holographic foil, like trading cards. It enhances pricing plans, invites, certificates and showcases. On phones, use the gyroscope or keep the card still.

“a card with a hologram shine like a Pokémon card”; “a floating 3D card effect when I hover”; “elements that pop out of the card like they are floating”

“a card that flips over to show the back”

Card flip (two-sided card). The card rotates 180 degrees on the horizontal or vertical axis to show different content on the back, on hover or on click; a split-flap variation flips in two halves to swap logos. It works for team members, FAQs and services with prices. On phones, trigger it by tap and keep both sides accessible.

“a photo on the front and a description on the back”; “a playing card flip effect on my site”; “partner logos swapping like an airport departure board”

“a card with a glow that follows the mouse”

Spotlight effect (cursor glow). A soft light follows the pointer inside a card, along the borders of a card grid or over a photo, like a flashlight revealing its relief. It gives feature lists and form fields a tech product look in dark mode. It reads well on dark backgrounds; on phones, light up the tapped card.

“a photo that lights up where I move the mouse, like a flashlight”; “card borders that light up as the mouse gets close”; “soft light tracking the pointer on dark cards”

“a notification that pops up in the corner and disappears by itself”

Toast notification. A short message that appears in a corner of the screen, stacks with earlier ones and fades after a few seconds, with undo or swipe to dismiss. It gives feedback after saving, sending or failing, and can show live activity on a landing page. Announce it to screen readers and never auto-hide important errors.

“a saved successfully message with an undo option”; “notifications popping up one by one, like on a phone”; “show visitors that people are buying on my site right now”

“pick my brand color and check if text on top of it is readable”

Color picker (with contrast check). A color picker with a hue area, HEX, RGB and HSL fields and preset swatches; the advanced version works in OKLCH, flags WCAG contrast and generates a 50 to 950 tonal scale. It suits theme settings, configurators and design systems. Offer text input besides dragging for keyboard users.

“let customers choose their theme color in my app”; “generate my brand color palette automatically”; “a color field that shows HEX and RGB values to copy”

“a features section in blocks of different sizes, like Apple's website”

Bento grid (mixed-size card grid). A grid layout where large and small cards fit together like a bento box, each holding a feature, a number or an image. It organizes benefits and services for quick reading; the perspective variation works for logo walls. On phones, stack the blocks in one column with the most important first.

“a card mosaic to present my services”; “big and small squares side by side on my landing page”; “a tilted 3D wall of client logos”

Buttons and cursors

“replace the mouse arrow with something nicer”

Custom cursor. It replaces the default arrow with a custom shape that follows the pointer smoothly, rotates toward the movement or drags an elastic line. It gives portfolios and agency sites an identity. Keep the native cursor in text fields, skip it on touch screens and respect reduced motion.

“a custom cursor with my brand icon”; “a cursor that lags slightly behind the mouse, very smooth”; “that different cursor you see on agency sites”

“a cursor that leaves a trail of photos as I move the mouse”

Cursor trail (mouse trail effect). The pointer leaves a trail behind it: photos that pop up and fade, colorful fluid, WebGL ribbons or lines with spring physics. It makes portfolios and campaign pages more playful. WebGL trails are heavy, so limit them to one section and turn them off on touch screens and for reduced motion.

“photos appearing behind the mouse as I move it”; “a colorful trail following the mouse like ink”; “a colorful snake that chases the cursor”

“a button with a shine sweeping across it”

Shimmer button (shine button). A reflection slides across the button or a light runs around its edge; variations add a rainbow glow underneath or a spinning conic gradient border. It draws attention to the main action, like subscribing, buying or booking, without making the button bigger. Use it on a single button per screen and keep text contrast high.

“a button with a colorful border spinning around it”; “a black button with light running around the border”; “a button with a rainbow glow underneath”

“a button that ripples when I click it”

Button microinteraction (ripple and hover). Small responses to touch and mouse: a circle spreading from the clicked point (ripple), rings pulsing behind an icon or a button that fills with color and reveals an arrow on hover. They confirm the click went through. Keep them short so they never slow navigation down.

“a tap effect on buttons like a phone app”; “a button that fills with color when I hover”; “circles pulsing behind the main button”

Forms and input

“an input for the code that arrives by SMS”

OTP input (one-time code). Six boxes, one per digit, that advance on their own, accept pasting the whole code and show error and success states, with a resend button and a countdown. It confirms phone numbers or emails and enables passwordless login. Set up SMS autofill and keep a single field for screen readers.

“verification code boxes like banking apps have”; “paste the whole SMS code into the field at once”; “a resend code button with a countdown”

“a multi-step sign-up form that checks ID numbers and fills the address from the postal code”

Multi-step form (form wizard). A sign-up split into steps with a progress bar, masks that format Brazilian CPF and CNPJ numbers, phones and dates while typing, address lookup by postal code and a password strength meter. It reduces drop-off in long sign-ups for clinics, fintechs and portals. Validate on the server too and show errors next to each field.

“an input mask that adds dots and dashes as I type”; “look up the address from the postal code in my form”; “a form that handles both individuals and companies”

“pick a start and end date on a calendar”

Date range picker. A calendar with two months side by side where people mark a start and an end, with shortcuts like last 7 days, highlighted holidays and a field to type the date. It suits report filters, bookings and scheduling. Keep a clear date format, arrow key navigation and an obvious way to close the popover.

“a date filter with last 7 days and this month”; “choose check-in and check-out dates on a booking site”; “a date field I can type into or open as a calendar”

“a drag and drop area for files, with photo cropping before upload”

Dropzone (drag and drop upload). An area that accepts dragged or selected files, shows name, size and progress and reacts when a file hovers over it. Before sending, in-browser editors crop and adjust the photo, trim the audio or cut video clips. Limit file type and size in the browser and check them again on the server.

“crop a profile picture before uploading”; “trim an audio clip without sending it to a server”; “a timeline to cut and join video clips”

“let people sign with their finger on the screen”

Signature pad. A drawing area that captures a signature with variable stroke width, undo and PNG or SVG export, plus the option to type the name in a cursive font. It works for consent forms, contracts and telehealth. To simply display a signature that draws itself, there is an animated SVG version.

“a signature field for a consent form”; “sign a contract on my site with the mouse”; “a signature that draws itself at the end of a letter”

Data and visualization

“bars that swap places in a ranking over time”

Bar chart race (racing bar chart). A horizontal bar chart that plays through time and reorders the ranking each period, with bars growing and overtaking each other, like those country ranking videos. It tells how sales, audience or market share evolved in a presentation. Include a pause button and a draggable timeline, and show the final table.

“a race chart like those country ranking videos”; “an animated ranking for the annual results presentation”; “bars growing and overtaking each other”

“a chart that keeps updating by itself in real time”

Live chart (real-time chart). A line or area chart that receives new data and scrolls its time axis, with a smooth curve and a tooltip on hover; for financial markets, a candlestick chart shows open, high, low and close with zoom and moving averages. Cap the number of visible points to keep it smooth.

“show how many users are online right now on my dashboard”; “a green and red candle chart like trading apps have”; “a line that scrolls sideways as new data comes in”

“a Brazil map colored by state for my dashboard”

Choropleth map (map colored by region). Each state gets a stronger color as its value grows, with a legend, a tooltip and a detail card on click; in the hexagon layout every state has the same size. It suits sales by region, public sector dashboards and campaigns. Use a single color scale and show the numbers in a table too.

“show sales per state, darker where we sell more”; “a map of the Brazilian states as a honeycomb”; “click a state and see its numbers in a card”

“a speedometer to show whether we hit the goal”

Gauge chart (speedometer style). An arc gauge with a needle that swings to the value and green, yellow and red bands, or a progress ring that fills up to a percentage. It shows goals, occupancy, wait times and course progress at a glance. Print the number next to the needle and never rely on color alone.

“a needle that swings to the value, like a car dashboard”; “a circle that fills up to show the percentage”; “a round KPI indicator for my dashboard”

“that GitHub-style grid of squares to show activity”

Heatmap (calendar or treemap). A grid where color intensity shows quantity: one square per day of the year, the cells of a cross table or, in a treemap, blocks that also change size with the value. It reveals frequency and concentration patterns in dashboards. Include a legend for the scale and the exact value in the tooltip.

“a calendar that colors the busiest days darker”; “a chart of proportional squares for revenue by department”; “a table that colors the cells with higher values”

“a flow chart with bands that split apart like rivers”

Sankey diagram (proportional flow). Bands sized by volume connect stages and show where each part goes, with particles running along the paths and the full route highlighted on hover. It explains sales funnels, patient journeys and where budgets come from and go. Keep the stages few and label each band with its value.

“a diagram showing where leads go at each funnel stage”; “see where the project money comes from and where it goes”; “a visual sales funnel with dots moving through the stages”

Apps and productivity

“a Trello-style board to drag tasks between columns”

Kanban board. Columns such as to do, doing and done, with cards people drag between them, plus labels, assignees, due dates and a limit of cards per stage. It organizes support tickets, sales and sprints inside an app. Support touch and keyboard dragging and save the new order on the server after each move.

“a support ticket board with priority and due dates”; “a kanban that works on phones by dragging with a finger”; “limit how many cards fit in each stage”

“a project schedule with bars I can drag to change dates”

Gantt chart (project schedule). A timeline with one bar per task, dependency arrows and today's date marked; dragging a task reschedules the ones after it and highlights the critical path. It suits rollouts, construction and client projects. Skip weekends in the math and let people edit dates through a form too.

“an MS Project style Gantt chart inside my app”; “when one task slips, the following ones move along”; “see the project's critical path highlighted”

“an Excel-like table inside my app that can handle lots of rows”

Data grid (spreadsheet-style table). A virtualized table that only draws visible rows and handles a hundred thousand records, with column filters, multi-sort, validated editing and pasting straight from Excel; there is also a spreadsheet with formulas and a pivot table with draggable fields. For bigger datasets, filter and paginate on the server.

“a spreadsheet with formulas inside my app”; “an Excel-style pivot table”; “copy from Excel and paste straight into the app table”

“a calendar to book appointments by dragging, like Google Calendar”

Scheduler (drag and drop calendar). A time grid in day or week view where people drag to create, move and resize appointments, with colors per professional and a line for the current time. It suits clinics, salons, classes and meeting rooms. Warn about overlapping bookings and make everything work with the keyboard too.

“a weekly calendar where I drag to create a time slot”; “a clinic calendar with a color for each doctor”; “a calendar that shows upcoming classes or appointments”

“a Notion-like block editor inside my app”

Block editor (Notion-style editor). An editor where each paragraph is a block: typing a slash opens a menu, markdown shortcuts turn lines into headings and lists, and blocks can be dragged to reorder. With version history and comments, it becomes a Google Docs style document editor. Save often and export to Markdown.

“a rich text field where typing a slash opens a menu”; “version history to go back to an older text”; “leave comments on parts of the document”

“a VS Code style screen inside my dashboard, with an editor and a terminal”

In-browser IDE (code editor). Building blocks of a coding environment: an editor with syntax highlighting, search and code folding, resizable panes, a simulated terminal, a file tree and side-by-side code diffs. It suits API playgrounds, docs and reviewing code an AI generated. Load the editor only on the page that uses it.

“a code editor with syntax colors in my admin panel”; “a fake terminal to show how my CLI works”; “show what changed in the code in red and green”

“a Miro-style board where my team sticks notes and connects them with arrows”

Whiteboard (infinite canvas). An infinite zoomable canvas for sticky notes, shapes, arrows that follow when dragged and a freehand pen; teammates' cursors show up live and comments stay pinned to spots on the canvas. It suits workshops, briefings and layout reviews. Export to SVG and save the state on the server.

“an endless board where the team organizes ideas”; “see teammates' cursors moving live, like Figma”; “let clients comment on the artwork with numbered pins”

“build a flow by dragging boxes and connecting them with arrows”

Node editor (node and link diagrams). Diagrams of connected boxes: a flow editor with ports and a run mode, a mind map edited from the keyboard, an org chart with automatic layout and a force graph for thousands of nodes. It suits automations, AI agents, team structures and knowledge bases. Offer zoom, search and a text list as an alternative.

“a company org chart with search by person”; “an Obsidian-style graph of linked dots”; “a mind map for brainstorming with a client”

AI interfaces

“that orb that moves while the AI is talking”

Voice orb (AI voice indicator). An animated sphere that switches between listening, thinking and speaking and pulses with the audio level from the microphone or the synthesized answer; the visualizer shows sound as bars or waves. It gives voice assistants and meditation apps a presence. Also show the state as text for people who cannot see the animation.

“an orb that reacts to the AI assistant's voice”; “bars that move with the sound for my podcast page”; “a circle that pulses with the music, like a radio player”

“an AI answer appearing word by word, like ChatGPT”

Text streaming (token by token response). The model's answer is shown as it arrives, token by token, with a cursor, a natural pace and markdown formatted on the fly; the arena shows two models answering side by side. It reduces the feeling of waiting in chats and assistants. Announce only the final answer to screen readers and let people stop generation.

“text that appears while the AI is answering”; “compare two models' answers side by side”; “a chat with streaming answers and a copy button”

“show what the AI agent is doing step by step”

Agent trace (AI agent steps). A timeline with each agent step, the tools it called, timing and status, plus a human approval card that pauses the flow before sensitive actions. It includes a multi-step loader and an interface the agent builds on demand. It brings transparency to automations; summarize the steps and hide technical details by default.

“ask the user to confirm before the AI sends an email”; “a loading screen that shows each step of the process”; “have the AI answer with cards and charts instead of plain text”

“a message box with attachments and a mic button, like an AI chat”

Prompt composer (AI message input). A field that grows with the text, takes attachments by drag or paste, opens commands on a slash, records from the microphone and swaps send for stop during generation; variations rotate suggestions in the placeholder and dissolve the text on send. It is the input of any AI chat; keep the draft on reload.

“a question box with rotating example suggestions”; “a send button that turns into stop while the AI answers”; “text that turns to dust when I hit send”

Commerce and conversion

“a payment page with Pix, card and boleto”

Checkout (Pix, card and boleto payment). A step-by-step payment flow: Pix with a QR code and a copy-and-paste code with a countdown, card payments with brand detection and installments, and boleto with its payment slip line. It shows an order summary and prices in reais. The component simulates payment; real charges need a payment provider on the server.

“a payment screen with a Pix QR code”; “a checkout with card installments and boleto”; “a step-by-step checkout for my online store”

“a cart that slides in from the side without leaving the page”

Cart drawer (slide-out cart). A panel that slides in from the right, or from the bottom on phones, with items, quantities, a coupon, shipping by postal code, a free shipping progress bar and product suggestions. It keeps people shopping on the same page. Trap focus while it is open and return it on close.

“a mini cart with shipping calculated by postal code”; “a bar showing how much more for free shipping”; “a panel that slides up from the bottom on mobile with the items”

“a pricing table with a monthly and yearly toggle”

Pricing table (plan comparison). Plan cards side by side with a monthly and yearly toggle, a savings badge, a highlighted recommended plan and a full feature comparison that expands. It is the core of SaaS and service pricing pages. On phones, stack the plans and turn the comparison into an accordion by category.

“highlight the most popular plan with a glowing border”; “a toggle to switch between monthly and yearly prices”; “compare the features of each plan in a table”

“show customer reviews with stars, like an online store”

Ratings and reviews (star rating). A block with the average as fractional stars, the 5 to 1 distribution as bars that filter the list, sorting, a helpful button and a form for new reviews. It adds social proof to product and landing pages. Publish only real reviews with dates and make the form stars work with the keyboard.

“an average rating with stars and the number of reviews”; “bars showing how many people gave each rating”; “a form for customers to rate the product”

“a testimonials section that rotates by itself”

Testimonials section. Customer quotes with photo, name and role that rotate with a transition, in a compact slider, in large type with parallax or as cards people swipe through. They bring social proof to services and products. Let people pause the rotation, show arrows and use real testimonials with permission.

“testimonials with the customer photo changing on its own”; “show one testimonial at a time as cards”; “a testimonial in big type with an elegant effect”

Navigation and scroll

“a menu with icons that grow when I hover over them”

Dock (macOS-style icon bar). An icon bar where each icon grows with the cursor's distance, like on the Mac; in the magnetic version, icons pull the pointer slightly. It works as the main navigation of portfolios, apps and floating menus. Give each icon a label, keyboard navigation and a comfortable touch size on phones.

“a Mac-style shortcut bar on my site”; “icons that pull the mouse like a magnet”; “a floating menu with icons at the bottom of the screen”

“a Ctrl K shortcut to search and run actions on my site”

Command palette (Cmd K menu). A search box that opens over the page with Ctrl K or Cmd K, finds pages and actions even with typos, groups results and shows shortcuts. It speeds up dashboards, docs and SaaS apps for keyboard users. Show the shortcut in the interface and keep a visible search button.

“a quick search that opens with a keyboard shortcut”; “a futuristic search bar with a glowing border”; “a command menu to navigate without the mouse”

“that black iPhone pill that expands to show what's going on”

Dynamic Island (live status pill). A pill at the top of the screen that morphs with springs between states, such as a notification, music playing, a call, a timer or reading progress, then shrinks back. It shows live status without covering content. Announce changes to screen readers and do not use it for messages that need immediate action.

“an alert at the top that stretches out and shrinks back”; “a live order status like a phone notification”; “a floating island with the article reading progress”

“client logos scrolling nonstop in a strip”

Marquee (infinite scrolling strip). Repeated content that loops horizontally or vertically, follows a curved path, spins around a circular badge or runs over a 3D shape. It suits client logos, testimonials, tags and slogans. Pause on hover, duplicate the content only visually and stop the motion for reduced motion.

“text scrolling in a loop like a ticker”; “a round badge spinning with words around the edge”; “a strip of testimonials scrolling sideways”

“content that moves sideways as I scroll down the page”

Horizontal scroll (sideways scrolling). A track of panels or cards that moves sideways: pinned to the screen while vertical scrolling pushes it, or in a carousel people drag, like Apple's showcase. It tells processes, case study steps and catalogs. Show progress, let people skip the section and test with trackpads and keyboards.

“big photo cards that slide sideways”; “a section that turns into horizontal scrolling when I reach it”; “a services showcase with tall cards and arrows”

“a section that tells a story as you scroll”

Scrollytelling (scroll-driven storytelling). The media stays pinned while text steps come into focus; with each step the image swaps, zooms or crops, or the product rotates and comes apart as you scroll, like Apple's product pages. It suits case studies, reports and launches. Keep the text readable without the animation and avoid very long sequences.

“a product that rotates and comes apart as I scroll”; “a pinned image that changes with each paragraph”; “a product screen that tilts up as I scroll, like a laptop opening”

“cards that stack up and stick to the top as I scroll”

Sticky scrolling (pinned element). An element stays pinned for part of the scroll while the rest moves past: cards that stick to the top and get covered by the next, media fixed beside the text or a sentence held still while its words light up. It organizes steps and methods. Use CSS sticky positioning and check short laptop screens.

“each card sticks to the top and the next one covers it”; “an image that stays still while the text scrolls by”; “a side menu that follows the scroll”

“a company timeline that fills in as I scroll”

Timeline (animated timeline). Milestones in sequence with sticky dates on the side and a gradient line that fills in as you scroll, following the reading. It suits company history, roadmaps, patient journeys and process steps. On phones, place the dates above each milestone and keep the order in the HTML.

“a beam of light that follows the text as I scroll”; “a product roadmap as a timeline”; “a patient journey in steps, with dates”

“tabs with a pill that slides to the selected option”

Animated tabs (sliding indicator). The active tab highlight slides or morphs to the new option and the content switches with a transition; in a top menu, a single panel resizes and moves between items with an arrow that follows. It organizes plans, modules and services. Use accessible tab roles and arrow key navigation.

“a top menu that opens a panel that changes size”; “tabs with a gooey effect when switching”; “switch between plans with a smooth animation”

“a window that opens over the page with a blurred background”

Animated modal (dialog overlay). A window that animates in over the content with a dimmed or blurred backdrop; on phones the equivalent is a bottom sheet that slides up and can be dragged, and with View Transitions the card itself grows into the detail view. It suits bookings and forms. Trap focus and close with Esc.

“a panel that slides up from the bottom on mobile, like a maps app”; “a card that grows into the detail page”; “a booking pop-up with a 3D entrance”

“a little bubble that shows up when I hover over an icon”

Tooltip and popover (anchored overlay). Layers anchored to an element: a hint following the cursor, a popover that flips near the edge, a right-click context menu and a guided tour that dims the screen and highlights one button at a time. They explain the interface without clutter. Make them keyboard friendly and never hide essential info behind hover.

“a step-by-step tour that highlights one button at a time for new users”; “a menu that opens with a right click”; “team photos that show a name on hover”

“layers that move at different speeds to create depth”

Parallax (layered depth effect). Layers that move at different speeds with scrolling or the cursor, creating a sense of depth; variations keep illustrations and icons floating. It brings illustrated heroes, testimonials and starry skies to life. Use small offsets with transforms only and turn it off for people who prefer reduced motion.

“a hero illustration that moves with the mouse in layers”; “icons slowly floating in the hero”; “a background that moves slower than the content as I scroll”

Give your AI a studio-grade repertoire

268 Vue and Nuxt components, 115 exclusive, a ready prompt in every one. Single payment, lifetime access and a 7-day guarantee.

Get access · R$ 497