Effects

A Progress Indicator shows task completion with linear bars, spinners, or steps, using aria-valuenow for accessibility during loads/uploads. Indeterminate for unknown.

An Accordion UI collapses/expands sections vertically for hierarchical content, saving space with smooth height transitions and ARIA roles. Common in FAQs/docs.

A Tooltip is a small overlay popup showing hints on hover/focus, using position: absolute and transitions for non-intrusive help. Accessible with aria-describedby.

Dark Mode is a UI theme that uses dark backgrounds with light text to reduce eye strain and save battery on OLED screens. It often toggles based on user preference or system settings, implemented via CSS variables and media queries.

Scroll Reveal is an animation technique that triggers elements to appear or animate as they enter the viewport during scrolling, enhancing user engagement. Libraries like AOS (Animate On Scroll) simplify implementation with CSS transitions.

Masonry Grid arranges items in columns with varying heights for efficient space use, like Pinterest, using CSS Grid or JS libs (react-masonry-css). Responsive flow.

A Sticky Header fixes navigation to viewport top on scroll using position: sticky, improving access without page jumps. Combines with shadows for feedback.

A Floating Action Button (FAB) is a circular button floating above UI for primary actions, following Material Design for prominence in mobile apps. It expands to menus or sheets on interaction.

Micro Interactions are small, functional animations responding to user actions (e.g., button hovers, loading ticks) to provide feedback and delight. They follow principles like timeliness and purpose.

Infinite Scroll loads more content dynamically as the user scrolls, replacing traditional pagination for a seamless, feed-like experience. Implemented with Intersection Observer for efficient triggering.

Container Queries allow CSS to adapt styles based on the parent container's size rather than the viewport, enabling more flexible, component-centric responsive design. Supported in modern browsers via @container and container-type.

Skeleton Loading displays placeholder UI (gray bars/shapes) while content loads, providing perceived performance and reducing user frustration. Implemented with CSS animations for shimmer effects.

Gradient Borders apply linear/radial gradients to element borders using CSS background-clip or conic-gradient for vibrant, modern outlines. Enhances buttons/cards.

Neumorphism (new morphism) is a design trend blending skeuomorphism and flat design with soft shadows for extruded, tactile UI elements on monochromatic backgrounds. It uses subtle gradients and inner/outer shadows.

Glassmorphism is a frosted glass effect using backdrop-filter blur, transparency, and subtle borders for ethereal, layered UIs. It evokes iOS/macOS aesthetics.

Hover Glow adds a soft, radiating light effect on mouseover using box-shadow or filter: drop-shadow for interactive feedback on buttons/cards. Subtle delight.

Parallax Scrolling creates depth by moving background elements slower than foreground during scroll, using transform/translate for illusion. Enhances storytelling.