Glossary
The vibe coding glossary. Watch every term move.
Know the effect you want but not its name? Find it here, see it in a live demo, and copy a prompt your AI coding tool will understand.
Motion
Entrances & exits
How elements appear on screen and leave it.
Fade in
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
Slide in
An entrance animation where an element moves into place from one side, often while fading in, so people see where it came from.
Scale in
An entrance animation where an element grows from slightly smaller than its final size to full size while it fades in.
Pop in
An entrance animation where an element scales up past its full size and settles back, giving it a quick, springy arrival.
Blur in
An entrance animation where text or an image starts blurred and transparent, then sharpens into focus as it appears.
Reveal animation
An entrance where a moving edge uncovers an element, as if a curtain slides away, usually built with an animated clip-path.
Enter and exit animations
The pair of animations an element plays as it is added to the page and as it is removed, so changes to a list or layout are easy to follow.
Timing & sequencing
How long motion lasts, when it starts, and how it repeats.
Duration
The length of time an animation takes from start to finish, usually set in milliseconds. It decides whether motion feels snappy or sluggish.
Delay
The wait between the moment an animation is triggered and the moment it starts moving, used to sequence motion or ignore brief triggers.
Keyframes
Snapshots that define how an element looks at set points in an animation. The browser fills in the motion between them.
Tweening
Generating the in-between frames of an animation from a start and an end state, so an element moves smoothly from one to the other.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Orchestration
Coordinating several different animations into one planned sequence, so the parts of a screen enter in a clear order.
Fill mode
A CSS setting that decides which styles an element shows before a delayed animation starts and after the animation ends.
Stepped animation
An animation that jumps through a set number of frames instead of moving smoothly, made with the CSS steps() timing function.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Yoyo animation
A looping animation that plays forward and then backward, so it moves back and forth smoothly instead of jumping back to the start.
Easing
How speed changes from the start of a motion to the end.
Easing
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
Linear easing
Easing that moves at one constant speed from start to finish, with no speeding up or slowing down, drawn as a straight line on a graph.
Ease-in
An easing curve that starts slowly and speeds up toward the end, like a car pulling away from a stop.
Ease-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
Ease-in-out
An easing curve that starts slowly, speeds up in the middle, and slows down again at the end, tracing an S shape on a graph.
Cubic-bezier
A CSS function that defines a custom easing curve with four numbers: the positions of two control points that bend the curve.
Asymmetric easing
An easing curve whose start and end are shaped differently, such as a quick start with a long, gentle landing.
Overshoot easing
An easing curve that runs slightly past its end point and then settles back, giving motion a small, springy kick.
Springs & physics
Motion driven by physics instead of a fixed duration.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Stiffness
A spring setting for how hard the spring pulls toward its target, where higher values feel fast and snappy and lower values feel loose and slow.
Damping
A spring setting that works like friction, deciding whether motion bounces and wobbles on arrival or settles smoothly without overshooting.
Mass
A spring setting for how heavy the moving object is, where heavier objects start slower, swing further past the target, and settle later.
Bounce
A spring setting from 0 to 1 for how much an element overshoots and wobbles, used with a duration in place of stiffness and damping.
Velocity
The speed and direction an element already has when an animation starts, which a spring carries forward so a flick flows into what follows.
Momentum
The glide an element keeps after a throw or flick, slowing down gradually like an object sliding across a smooth table.
Interruptible animation
An animation that can change course mid-flight, continuing smoothly from its current position and speed when someone acts again before it ends.
Rubber-banding
An edge effect where content dragged past its limit moves less than your finger, then springs back on release, like a stretched rubber band.
Transforms
Moving, resizing, rotating, and tilting elements.
Translate
A CSS transform that moves an element along the x or y axis while the layout around it stays exactly where it was.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Rotate
A CSS transform that turns an element around its transform origin by an angle, such as `rotate(45deg)`.
Skew
A CSS transform that slants an element along the x or y axis, turning a rectangle into a parallelogram.
3D flip
A card that turns over in 3D to reveal a second face on its back, built with `rotateY` and `backface-visibility: hidden`.
Perspective
A CSS property that sets how far the viewer sits from a 3D scene, so rotated elements look deep up close and flatter from far away.
Transform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Origin-aware animation
A popover, menu, or tooltip that grows out of the button that opened it, by setting its transform origin on the side facing the trigger.
State transitions
Connecting one state, view, or page to the next.
Crossfade
A transition where the old content fades out while the new content fades in at the same spot, so the two briefly overlap.
Morph
A transition where one shape smoothly changes its size, corners, and contents into another, like a small pill growing into a full card.
Shared element transition
A transition where an element from one view, like a thumbnail, travels and grows into its place in the next view, linking the two screens.
Layout animation
An animation that smoothly moves and resizes elements when the layout changes, such as list items gliding to new spots after a sort or filter.
Height auto animation
An animation that opens or closes a panel to the exact height of its content, even though that height is unknown ahead of time.
Direction-aware transition
A transition that slides new content in from the side you are heading toward, so going forward and going back move in opposite directions.
Continuity transition
A transition where one element keeps its identity as it changes role, like an “Add to cart” button that becomes a progress bar, then a checkmark.
Page transition
An animation that plays when you move from one page or screen to another, such as the old page fading out as the new one fades in.
View Transitions API
A browser feature that animates between two states of a page by snapshotting the old view, applying your update, and animating to the new one.
Scroll effects
Motion tied to scrolling.
Scroll reveal
An animation that fades or slides content into place as it scrolls into view, so each section appears just as the reader reaches it.
Scroll-driven animation
An animation whose progress is tied directly to the scroll position, so it moves forward as you scroll down and rewinds as you scroll up.
Parallax scrolling
A scroll effect where background layers move slower than the foreground, which creates a sense of depth as the page scrolls.
Scrollytelling
A storytelling layout where a pinned graphic changes step by step as the reader scrolls through short blocks of text beside it.
Scroll pinning
A scroll effect that holds a section in place while its content animates through several states, then releases it to scroll away.
Horizontal scroll section
A pinned section where scrolling down moves a row of cards sideways, turning vertical scrolling into horizontal movement.
Scroll progress bar
A thin bar at the top of a page that fills from left to right as the reader scrolls, showing how much of the article is left.
Scroll snap
A CSS feature that makes a scroll container settle on set points, so carousels and full-screen sections come to rest neatly on an item.
Smooth scrolling
Animated scrolling that glides to a new position, such as the target of an anchor link, so readers can see where on the page they went.
Interaction feedback
Motion that answers a hover, click, drag, or swipe.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Ripple effect
A circle that spreads out from the exact spot you tap or click on a button and then fades, made popular by Google's Material Design.
Shake animation
A quick side-to-side jiggle that tells someone their input was rejected, such as a wrong password or an invalid code.
Hold to confirm
A button you press and hold for a moment, with a fill that shows progress, used to confirm a destructive or important action.
Drag gesture
Moving an element by pressing on it and sliding the pointer or finger, usually within set bounds and with a glide after release.
Drag to reorder
A list you can rearrange by dragging an item to a new spot while the other items slide aside to make room.
Swipe to dismiss
A gesture where you drag an item sideways past a threshold to remove it, while a shorter swipe lets it spring back into place.
Pull to refresh
A gesture where you drag a list down from the top to reveal a spinner and load fresh content, common in mobile feeds and inboxes.
Magnetic button
A button that leans toward the mouse pointer as it gets close, then springs back when the pointer leaves.
Custom cursor
A designed shape, such as a dot or a ring, that replaces or trails the mouse pointer and reacts to what it passes over.
3D tilt card
A card that tips in 3D as the mouse moves over it, often with a moving glare, so it feels like a physical object in your hand.
Spotlight card
A card whose border and background light up with a soft radial glow that follows the mouse pointer, often across a whole grid of cards.
Text effects
Ways to animate words and numbers.
Typewriter effect
A text animation that reveals a line one character at a time, as if someone were typing it, usually with a blinking caret at the end.
Text scramble
A text animation where each character flickers through random letters and symbols before settling on the final word, like a code being cracked.
Split text animation
A text animation that breaks a heading into characters, words, or lines and animates each piece in turn, so the text arrives as a wave.
Text morph
A text transition where the letters two words share slide to their new spots while the others fade out or in, so a label changes without a hard cut.
Rotating words
A headline where one word keeps changing in place, rolling or fading through a short list while the rest of the sentence stays put.
Gradient text
Text filled with a color gradient instead of a solid color, made by painting a gradient background and clipping it to the shape of the letters.
Shimmer text
Text with a band of light sweeping across it on a loop, often used for "Thinking…" and other status labels while an app is working.
Number ticker
A number that animates to its new value, either counting through the values in between or rolling each digit into place like an odometer.
Tabular numbers
A font setting that gives every digit the same width, so numbers line up in columns and timers or counters stop shifting as they change.
Underline animation
A link underline that draws itself on hover, growing from the left, from the center, or sweeping through, instead of simply appearing.
Loops & ambient motion
Animations that keep running on their own.
Marquee
A strip of logos or text that scrolls sideways in an endless loop, often used for "trusted by" rows and announcements.
Pulse animation
A soft, repeating beat or expanding ring that draws the eye to a live status, a new notification, or something that needs attention.
Float animation
A slow up-and-down drift on a loop that makes icons, illustrations, or product shots look weightless.
Orbit animation
Small icons or dots circling a central element on one or more rings, often used to show the tools a product connects to.
Idle animation
Subtle motion, such as breathing or blinking, that plays while a character or element waits, so it feels alive before anyone interacts.
Particle background
A backdrop of small dots that drift slowly, often linked by faint lines when they pass close to each other, behind a hero or sign-in screen.
Border beam
A short streak of light that travels around the edge of a card or button on a loop, drawing attention to it.
Confetti
A burst of small colored pieces that fly out and flutter down to celebrate a moment, such as finishing signup or publishing a site.
Animated gradient
A color gradient that slowly shifts across a surface on a loop, often used behind a hero or call to action to add warmth and motion.
Visual effects
Blurs, clips, masks, and other finishing touches.
Blur
A softening effect made with CSS filter: blur() on an element itself, or backdrop-filter: blur() on whatever shows through it from behind.
Clip-path
A CSS property that cuts an element to a shape, such as a circle, an inset rectangle, or a polygon, and hides everything outside it.
Mask
A CSS technique that uses an image or gradient to set how visible each part of an element is, often used to fade edges softly.
Before/after slider
A comparison control that stacks two versions of an image and lets people drag a divider to reveal more of one or the other.
SVG line drawing
An animation that makes an SVG outline look like it is being drawn by hand, by revealing its stroke from start to end.
Lottie animation
A vector animation saved as a JSON file, usually exported from After Effects, that plays in apps and websites through a Lottie player.
Motion principles
Ideas that decide when and how to animate.
Purposeful animation
Animation used only where it helps people notice a change, follow where something went, or understand what just happened.
Anticipation
A small move in the opposite direction just before the main action, like crouching before a jump, so the motion that follows reads clearly.
Follow-through
When the main object stops but loose, attached parts keep moving for a moment, swing past, and settle, which makes motion feel physical.
Squash and stretch
Stretching an object along its path when it moves fast and flattening it on impact, so it looks elastic and has weight.
Perceived performance
How fast an app feels to people, which skeleton screens, instant feedback, and progressive loading can improve even when the real wait stays the same.
Frequency of use
The rule that the more often people see an animation, the shorter and subtler it should be, so everyday actions never feel slow.
Spatial consistency
Moving elements in ways that match where things live in the interface, so people can tell where an item went and how to find it again.
Reduced motion
An operating system setting that asks apps to minimize movement, which websites detect with the prefers-reduced-motion media query.
Animation performance
What keeps motion smooth instead of choppy.
Frame rate (FPS)
The number of frames a screen draws each second; around 60 fps, motion looks smooth, and at lower rates it starts to look choppy.
Jank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
GPU acceleration
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
will-change
A CSS property that tells the browser an element is about to animate, so it can prepare, often by giving the element its own layer ahead of time.
Layout thrashing
A slowdown caused by code that alternates style changes with size reads, forcing the browser to recalculate layout many times in one frame.
Interface
Layout
How a page is arranged.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Above the fold
The part of a page visible before anyone scrolls, ending at the fold: the bottom edge of the screen, which moves with every screen size.
Sticky header
A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.
Sidebar
A vertical panel along the side of an app that holds the main navigation, often collapsible to a slim strip of icons.
Bento grid
A grid of rounded tiles in mixed sizes that fit together like a bento lunch box, often used to show several features at once.
Card
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Flexbox
A CSS layout mode that lines items up in a row or a column and controls how they share space, align, and wrap.
CSS Grid
A CSS layout system that places items on rows and columns at once, so content lines up in both directions.
Padding vs margin
Padding is the space inside an element’s border, around its content, while margin is the space outside the border that pushes other elements away.
Responsive design
Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.
Container
A wrapper that caps content at a maximum width and centers it, so lines stay readable on wide screens and keep padding on small ones.
Masonry layout
A layout of columns where items of different heights stack tightly with no row lines, like stones in a wall or a Pinterest board.
Split screen
A layout that divides the screen into two side-by-side panels, each with its own content, sometimes with a divider you drag to resize.
Z-index
A CSS property that decides which element appears on top when elements overlap, with higher numbers sitting closer to the viewer.
Overflow
A CSS property that decides what happens when content is bigger than its box: spill out, get clipped, or scroll inside it.
Components
The building blocks of an interface.
Button variants
A set of button styles, such as primary, secondary, outline, ghost, destructive, and link, that shows which action on a screen matters most.
Modal
A window that opens over the page, dims everything behind it, and blocks the rest of the interface until you finish or dismiss it.
Drawer
A panel that slides in from the edge of the screen, usually the bottom on phones or the side on desktop, to show extra content or options.
Popover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
Tooltip
A small label that appears next to an element when you hover over it or focus it, naming an icon button or adding a short hint.
Dropdown menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
Context menu
A menu of actions for one item that opens at the pointer when you right-click it, or long-press it on a touch screen.
Toast notification
A brief message that slides into a corner of the screen to confirm an action, then disappears on its own after a few seconds.
Tabs
A row of labels that switches between panels of related content in the same spot, showing one panel at a time.
Segmented control
A compact row of two to five options in one pill-shaped track, where a sliding thumb marks the single selected option.
Accordion
A vertical stack of headings that each expand to reveal their content when clicked, so long pages stay short and easy to scan.
Carousel
A row of slides shown one at a time and moved with arrows, dots, swipes, or a timer, to fit several images or cards in one spot.
Command palette
A search box that opens with a shortcut like ⌘K and lets you find and run any command or page by typing a few letters.
Combobox
A text field with a dropdown list that filters as you type, so people can pick one option from a long list quickly.
Toggle switch
An on/off control shaped like a small track with a sliding knob, used for settings that take effect immediately.
Checkbox
A small square you tick to turn an option on or select an item, with a dash in a parent box when only some items are checked.
Radio button
A round option in a group where choosing one clears the others, so people pick exactly one answer, like a plan or a shipping speed.
Date picker
A form control that opens a small calendar so people can pick a date, or a range of dates, by clicking days.
Breadcrumb
A row of links, like Projects / Website / Settings, that shows where a page sits in the site and lets people jump back up a level.
Pagination
Navigation that splits a long list into numbered pages with Previous and Next buttons, so people browse a fixed number of items at a time.
Infinite scroll
A list that loads the next batch of items automatically as you scroll near the bottom, so the feed seems to never end.
Badge
A small rounded label that marks a status or a count, like New, Beta, Failed, or the red number on an inbox icon.
Avatar stack
A row of overlapping profile pictures that shows who is on a project or in a document, with a +3 counter for everyone who doesn’t fit.
Empty state
What a screen shows when there is nothing in it yet: a short message, often a simple illustration, and one clear action to add the first item.
Skeleton screen
A loading placeholder made of gray blocks shaped like the content on its way, often with a soft shimmer, that the real content replaces.
Spinner
A small looping animation, usually a rotating ring, that shows the app is busy with a short task of unknown length.
Progress bar
A horizontal bar that fills from left to right to show how much of a task is done, or slides in a loop while the total is still unknown.
Data table
A table built for working with records: click a column header to sort, type to filter, and check rows to act on several at once.
Stepper
A multi-step flow with a row of numbered steps, like Account, Profile, Done, that shows where you are and how many steps are left.
Floating label
A form field whose label sits inside the input like a placeholder, then shrinks and moves to the top edge when you focus or type.
Inline validation
Form checking that happens right next to each field as you fill it in, showing an error or a checkmark before you press Submit.
Alert banner
A colored strip in the page that delivers an important message, such as info, success, warning, or error, and stays until it is resolved or dismissed.
Tag input
A text field where each word you type becomes a removable chip when you press Enter or a comma, for adding labels, emails, or keywords.
States & patterns
How an interface behaves while people use it.
Interaction states
The set of looks a control takes as people use it, such as default, hover, pressed, focused, and disabled, each showing what will happen.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Loading state
The view a screen shows while its data is on the way, designed together with the outcomes that follow: loaded, empty, or error.
Optimistic UI
A pattern where the interface shows the result of an action right away, before the server confirms it, and rolls it back if the request fails.
Debounce
A technique that waits for a short pause in typing or other repeated events, then runs the work once instead of on every keystroke.
Lazy loading
A technique that waits to load images, videos, or code until they are about to scroll into view, so the first screen loads faster.
Dark mode
An alternate color theme with light text on dark backgrounds, chosen in settings or matched to the device’s system setting.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Affordance
The visual cues that tell people what they can do with an element, like a raised button that looks pressable or a grip that says "drag me".
Undo
A way to reverse an action right after doing it, often a toast with an Undo button that appears after deleting or archiving something.
Drag and drop
An interaction where you pick up an item with the pointer, move it, and release it over a target, such as dropping a file onto an upload area.
Keyboard shortcut
A key combination that runs an action directly, like ⌘S to save or ⌘K to open search, so frequent users can skip the mouse.
Visual styles
Named looks you can ask for.
Glassmorphism
A visual style where panels look like frosted glass: translucent, blurred backgrounds with a thin light border over colorful shapes.
Liquid glass
Apple’s translucent interface material from 2025 that bends, reflects, and tints the content behind it, with bright highlights along its edges.
Neumorphism
A soft UI style where buttons and cards look pushed out of, or pressed into, a surface of the same color, using light and dark shadows.
Claymorphism
A playful UI style with puffy, rounded shapes that look like soft clay, made with large radii and layered inner and outer shadows.
Neo-brutalism
A bold UI style with thick black borders, hard offset shadows, flat bright colors, and chunky type that looks raw on purpose.
Skeuomorphism
A design style where digital controls imitate real objects and materials, such as metal knobs, leather, paper, and physical switches.
Flat design
A design style that uses solid colors, simple shapes, and clean type, with no gradients, textures, or realistic shadows.
Mesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Aurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Grain texture
A fine layer of random noise placed over a gradient or image to add a tactile, printed feel and hide color banding.
Glow effect
A soft halo of colored light around a button, card, or text, made with colored shadows or a blurred layer behind the element.
Drop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Border radius
The CSS property that rounds an element’s corners, from a slight softening to a full pill or circle.
Grid background
A decorative background of thin grid lines, dots, or stripes, often faded toward the edges, used behind hero sections and product shots.
Typographic hierarchy
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
Accent color
The one highlight color an interface uses for actions and selected states, and the CSS property that tints native form controls.
Color contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
Building with AI
Vibe coding & AI
The words AI coding tools use, explained.
Vibe coding
A way of building software by describing what you want to an AI model and steering the result in conversation, without writing the code yourself.
Prompt
The instruction you give an AI model. In AI coding tools, the prompt describes what to build or change, and its detail shapes the result.
Context window
The amount of text an AI model can consider at once, including your messages, its replies, and the files it reads, measured in tokens.
Token
A small chunk of text, often a word or part of a word, that AI models read and write. Limits, usage, and pricing are counted in tokens.
AI agent
An AI model that works toward a goal on its own by planning, using tools, checking the results, and repeating until the task is done.
Tool call
A request from an AI model to run a named action, such as reading a file, searching, or running a command, whose result goes back to the model.
Hallucination
When an AI model states something false with confidence, such as code that calls a function, package, or option that does not exist.
Diff
A view of what changed in a file, with removed lines marked in red with a minus sign and added lines in green with a plus sign.
Live preview
A running copy of your app beside the code or chat that updates as soon as a file is saved, so you see each change without reloading.
Checkpoint
A snapshot of your project that an AI coding tool saves as it works, so you can rewind the code to an earlier point when a change goes wrong.
Git commit
A saved snapshot of a project in Git with a short message describing the change. Commits form a history you can compare, review, and restore.
Deploy
Building your app and publishing it to servers so anyone can use it at a public URL. Each deploy puts a new version live.
Frontend and backend
The two halves of a web app: the frontend runs in the browser and draws what you see, and the backend runs on a server and handles data.
API
A set of rules that lets one program ask another for data or actions, usually by sending a request to a URL and getting JSON back.
Database
An organized store for your app's data, such as users, posts, or orders, kept in tables so the app can save, find, and update it.
Rules file
A file in your project, such as AGENTS.md or CLAUDE.md, with standing instructions that an AI coding agent reads at the start of every task.
MCP
The Model Context Protocol: an open standard that connects AI apps to outside tools and data, such as files, databases, and design apps.
Plan mode
A mode in AI coding tools where the agent researches the project and proposes a step-by-step plan for your approval before it edits any files.
Visual edit
Changing an app by pointing at an element in its preview and describing the change right there, so the AI knows exactly which part you mean.