Text Scramble
aka Glitch Text, Decode Effect, Hacker TextCharacters randomise through a pool of letters/symbols, then resolve sequentially into the final word. Creates a sense of computation or decryption.
Origem
Borrowed from terminal aesthetics and cyberpunk visual design. Popularized on the web by agencies in the early 2010s, resurged with the lo-fi/brutalist web trend around 2020.
Quando usar
Hero headlines, section transitions and hover-triggered labels. Signals 'tech', 'hacker' or 'AI' moods without needing iconography.
Particle Field
aka Particle System, Dot Network, Constellation EffectHundreds to thousands of small dots (particles) move across a canvas and draw connecting lines when within a proximity threshold. Often reacts to mouse position.
Origem
Canvas/WebGL particle systems have existed since the early 2010s. The 'dot network' version was popularized by particle.js (Vincent Garreau, 2014), which became one of the most starred JS libraries on GitHub.
Quando usar
Hero backgrounds for tech companies, SaaS products and AI startups. Suggests 'networks', 'data' and 'connection' without explicit iconography.
Aurora / Animated Gradient
aka Mesh Gradient, Gradient Blob, Aurora BackgroundLarge, soft color blobs animate slowly across a background using CSS radial gradients, SVG filters, or WebGL shaders. Creates a living, organic light effect reminiscent of the northern lights.
Origem
Popularized by Linear's launch in 2020 with their dark mesh gradient hero. Apple adopted a version for iCloud and Apple Music around the same period.
Quando usar
Hero backgrounds for B2B SaaS products, AI tools and design-forward startups. Communicates creativity and premium positioning without imagery.
Typewriter Effect
aka Typing Animation, Text Cursor EffectText appears character by character as if being typed in real time, often with a blinking cursor. Can cycle through multiple phrases to communicate varied value propositions.
Origem
One of the oldest web effects, dating to JavaScript typewriter scripts in the early 2000s. Resurged with libraries like Typed.js (2014) and again with AI chatbot UIs in 2022–2023.
Quando usar
Hero headlines that cycle through keywords, CLI-style interfaces and AI product UIs. Conveys 'live', 'intelligent' or 'in progress' states.
Parallax Scroll
aka Depth Scroll, Multi-layer ScrollBackground and foreground layers move at different speeds as the user scrolls, creating an illusion of depth. Foreground moves faster, background slower.
Origem
Borrowed from 2D side-scrolling video games of the 1980s. Nike Better World (2011) is credited with popularizing it in web design, triggering a wave of scroll-heavy portfolio sites.
Quando usar
Hero sections, storytelling layouts and marketing pages that want to feel immersive. Best used sparingly — overuse causes motion sickness.
Scroll Reveal
aka Reveal on Scroll, Intersection Animation, Fade-in on ScrollElements are hidden initially and animate into view (fade, slide, scale) as they enter the viewport. Uses the Intersection Observer API or scroll position to trigger CSS transitions.
Origem
A staple of web design since jQuery ScrollReveal (2014). Nativized with the Intersection Observer API (Chrome 51, 2016), making it viable without JS scroll listeners.
Quando usar
Content sections, feature lists, testimonials — anywhere a page would feel static without animation. Now considered standard on any content-heavy site.
SVG Path Animation
aka SVG Draw, Stroke Animation, Line Drawing EffectSVG paths are animated using stroke-dashoffset, making lines appear to draw themselves. The technique uses stroke-dasharray equal to path length and animates dashoffset from full length to zero.
Origem
Popularized by Polygon's PS4 vs Xbox One feature (2013), one of the first editorial pieces to use SVG draw-on animation for storytelling. Now a standard tool for logo reveals and illustrations.
Quando usar
Logo reveals, icon animations, illustrated diagrams and infographics. Extremely lightweight compared to video and works at any resolution.
Stagger Animation
aka Cascade Animation, Sequence Animation, Choreographed EntranceA group of elements animate in sequence with a small delay between each, creating a cascading or wave effect. Typically applied to lists, grids or text words/characters.
Origem
A core concept from traditional animation ('follow through' and 'overlapping action'). Brought to the web by GSAP's stagger utilities and popularized by Framer Motion's variants system.
Quando usar
Navigation menus opening, list items loading, feature grids revealing and text entrances. Makes what would be a simultaneous animation feel dynamic and alive.
Clip-Path Transition
aka Shape Wipe, Geometric Reveal, Masked TransitionCSS clip-path is animated between polygon, circle or inset shapes to create geometric reveal or wipe transitions. The clipping path defines what's visible — animating it creates the illusion of content appearing through a moving shape.
Origem
Became practical with Safari support for animated clip-path around 2017. Agencies like Resn and Active Theory popularized complex shape transitions for page and section reveals.
Quando usar
Page transitions, section reveals, hover effects on images and button fills. Extremely performant as it runs on the compositor thread.
Infinite Marquee / Logo Strip
aka Ticker, Logo Scroll, Infinite LoopA horizontal strip of content (logos, text, cards) scrolls infinitely using a CSS animation that translates the container by exactly one copy's width, then resets seamlessly. Duplicate elements are used to fill the loop.
Origem
Revived from the deprecated HTML <marquee> tag by modern agencies around 2020. Linear, Vercel and dozens of SaaS companies adopted the logo-strip marquee as social proof.
Quando usar
Partner/client logo strips, feature tags, testimonials and any content that benefits from continuous motion without user interaction.
Magnetic Cursor
aka Cursor Magnet, Elastic CursorElements attract the mouse pointer as it approaches, simulating a magnetic pull. The element's position is offset toward the cursor using spring physics — the closer the cursor, the stronger the pull.
Origem
Popularized by French creative agency Locomotive and developer Aristide Benoist around 2018–2019 as a signature of premium portfolio sites.
Quando usar
CTAs, navigation links and floating buttons on agency portfolios. Creates a tactile, alive feeling that makes elements feel interactive before they're clicked.
3D Card Tilt
aka Perspective Tilt, Mouse Tilt, 3D Hover CardCards rotate on their X and Y axes to follow the mouse, creating a 3D perspective tilt effect. A subtle glare layer moves opposite to the tilt to simulate a light reflection.
Origem
Popularized by Codrops (Manoela Ilic) in demo experiments around 2016–2018. Became a signature of NFT and crypto product cards in 2021.
Quando usar
Product cards, NFT galleries, pricing cards and portfolio showcases. Adds physicality and premium feel to flat content.
Custom Cursor / Cursor Follow
aka Cursor Trail, Cursor Blob, Dot CursorA custom element replaces or accompanies the native cursor, following mouse position with a slight lag (using lerp/spring easing). Often changes shape or color on hover over interactive elements.
Origem
A staple of creative agency websites since the mid-2010s. Awwwards-featured agency sites normalized the custom cursor as a signature of premium web experiences.
Quando usar
Creative portfolios, agency sites and luxury brand experiences. Signals craftsmanship but adds JS overhead — avoid on content-heavy or utility-focused products.
Hover Reveal / Image Reveal
aka Image Peek, Card Reveal, Thumbnail RevealHovering a list item or text link reveals an image or preview panel that follows the cursor or appears at a fixed position. Often animated with a clip-path wipe or opacity + scale transition.
Origem
Popularized by editorial and portfolio sites around 2017–2019, particularly in the journalism and photography world. Robin Noguier's portfolio (robinnoguier.com) is a canonical reference.
Quando usar
Project lists, navigation menus and article feeds where visual previews add context without consuming layout space.
Shimmer / Skeleton Loading
aka Skeleton Screen, Content Placeholder, Ghost UIPlaceholder shapes that mirror the layout of content while it loads. A gradient animation sweeps across the shapes, creating a shimmering effect that communicates 'loading in progress'.
Origem
Luke Wroblewski coined 'skeleton screens' in 2013. Facebook popularized the animated shimmer version in their mobile app around 2015, replacing spinner-based loading.
Quando usar
Any content that loads asynchronously: feeds, cards, profiles, tables. Reduces perceived wait time by showing structure before data arrives.
Glassmorphism
aka Frosted Glass, Blur CardUI elements styled to look like frosted glass — semi-transparent backgrounds with backdrop-filter blur, subtle saturation boost, and a thin light-colored border.
Origem
Formalized by Michal Malewicz in 2020 after Apple popularized the aesthetic in macOS Big Sur and iOS 14. The term 'glassmorphism' spread rapidly through the design community.
Quando usar
Cards, modals, sidebars and navigation overlays. Works especially well over colorful or blurred photo backgrounds, giving depth without solid color blocks.
Noise / Grain Texture
aka Film Grain, CSS Noise, Grainy GradientA layer of subtle visual noise (generated via SVG feTurbulence, Canvas random pixels or a semi-transparent PNG) is overlaid on backgrounds or gradients to add texture and reduce the plastic feel of flat digital color.
Origem
A long-standing print technique brought back to web design around 2019 with the 'retro/nostalgic' design trend. Commonly used to make gradients feel more analog.
Quando usar
Backgrounds, gradient cards, illustration-heavy sites and any context where 'too digital' or 'too clean' would feel cold. Particularly popular in branding and editorial design.
Neumorphism
aka Soft UI, NeomorphismUI elements appear extruded from or pressed into their background using dual box-shadows — one light, one dark — on a monochromatic surface. Creates a tactile, physical appearance.
Origem
Coined by Michal Malewicz and Jason Kelley in late 2019. Gained viral attention on Dribbble in early 2020 before facing heavy criticism for accessibility issues (low contrast).
Quando usar
Dashboard widgets, audio players and design-showcase UIs where aesthetic trumps accessibility. Use with extreme care — WCAG compliance is nearly impossible with standard neumorphic styling.
Gradient Text
aka Text Gradient, Colorful HeadlineText is filled with a gradient using the CSS combination of background with a gradient, background-clip: text, and color: transparent (or -webkit-text-fill-color: transparent). The gradient shows through the text shape.
Origem
Available in Webkit since 2008 but only standardized in CSS around 2020. Became ubiquitous in AI product launches from 2022 onward — nearly every AI startup hero headline uses this technique.
Quando usar
Hero headlines, product names, accent words within paragraphs. Overused in the AI/SaaS space — use sparingly for maximum impact.