Web design concepts

A quick reference of web design and interactive scroll techniques, to bring them back at a glance.

Interactive scroll

• Smooth scroll Lenis Scroll with inertia and easing that makes the page feel fluid and premium. Foundation of almost every scroll effect; gives that buttery feel. Seen on: lenis.darkroom.engineering, the library home page, running on Lenis. Ask your agent for it: Add Lenis smooth scroll to this page. Install it, start it at the entry point and hook its loop to requestAnimationFrame. Do not touch scroll-behavior in CSS and do not break anchor links: check that a link to #section still gets there. Respect prefers-reduced-motion by turning the inertia off.
• Parallax CSS · JS Layers moving at different speeds while scrolling, creating a sense of depth. Immersive heroes and visual storytelling. Ask your agent for it: Make this section background move slower than the content on scroll. Use transform: translate3d, never top or background-position, which force a relayout. Keep the amplitude to a few pixels, not half the screen, and turn it off under prefers-reduced-motion.
• Scroll Snap CSS Scrolling snaps automatically to each section or slide (scroll-snap-type). Full-screen presentations, carousels and slide-like sections. Seen on: stripe.com, its homepage carousels snap with scroll-snap. Ask your agent for it: Turn these sections into slides that snap on scroll, in plain CSS: scroll-snap-type on the container and scroll-snap-align on each child. Use proximity rather than mandatory if a section can be taller than the screen, otherwise people cannot reach the bottom of it.
• Scroll-driven animations CSS scroll()/view() Animations tied to scroll progress, now native in CSS with no JS needed. Progress bars, reveals and light parallax at 0 KB. Seen on: stripe.com, animates with animation-timeline, no scroll JavaScript. Ask your agent for it: Tie this animation to scroll progress with native CSS: animation-timeline with scroll() or view(), no JavaScript. Leave a fallback for browsers without support using @supports (animation-timeline: view()), and make sure the element still looks right, just static, when unsupported.
• Scroll reveal IntersectionObserver Elements that appear or animate as they enter the viewport. Reveal sections on scroll; with stagger it looks very elegant. Ask your agent for it: Make these blocks appear as they enter the viewport, with IntersectionObserver rather than a scroll listener. Animate each element once and then stop observing it. Important: the content must be in the HTML and visible by default, with the animation hiding it only when JavaScript runs, so it never disappears for a crawler.
• Sticky / Pin CSS · GSAP An element sticks on screen while the rest of the content keeps moving. Stacking cards, pinned demos and chapters. Seen on: vercel.com, eleven elements that stick as you scroll. Ask your agent for it: Pin this column while the one next to it keeps scrolling, using position: sticky and top. Before assuming it works, check that no ancestor has overflow hidden, auto or scroll: that is what breaks sticky nine times out of ten, and it fails silently.
• Horizontal scroll GSAP Sideways movement driven by the vertical scroll. Galleries, timelines and portfolios. Ask your agent for it: Turn this section into a sideways move driven by vertical scroll. Pin the container and shift the cards with transform. Leave an exit: when the strip ends the page must keep scrolling normally, and on mobile a scroll-snap carousel beats hijacking the scroll.
• Marquee CSS · JS A strip of text or logos looping infinitely. Client logo strips and moving headlines. Seen on: vercel.com, the logo strip that never stops moving. Ask your agent for it: Build a logo strip that loops with no visible seam. Duplicate the content and animate the whole set with transform: translateX in a linear @keyframes, which is what hides the jump. Pause it on hover and under prefers-reduced-motion. Do not use the marquee tag, it is dead.
• Scrollytelling JS Telling a story driven by scroll, with text and visuals in sync. Interactive features, 'how it works' sections, narrated data. Ask your agent for it: Build a scroll-driven story: one visual pinned to one side and text steps on the other that change it. Detect the active step with IntersectionObserver. Every step has to make sense read on its own, without the visual, because that is what a crawler or a broken-JavaScript visitor gets.
• Page transitions View Transitions · barba.js Animated transition when navigating between pages or views. Make navigation feel app-like, without harsh reloads. Ask your agent for it: Add a transition between pages with the browser View Transitions API, not a library. Wrap the change in document.startViewTransition and check it exists first. Without support, navigation must stay instant and correct: the transition is a bonus, never a requirement.

Pointer & micro-interactions

• Tilt 3D JS · CSS An element tilts in 3D following the mouse (perspective + rotateX/Y). Product cards, avatars and highlighted elements.
• Hover magnético JS A button attracts the cursor by moving slightly toward it. CTAs and buttons that invite a click.
• Cursor personalizado (lerp) JS A custom cursor that follows the mouse with easing (linear interpolation). Creative brands and portfolios with personality.
• Micro-interacciones CSS Tiny feedbacks on hover, focus and click (scale, color, shadow). They make the UI feel alive; they reinforce each action. Seen on: apple.com, every transition carries its own curve, not the default one.
• Cursor blend mix-blend-mode A cursor or shapes that invert the color of what's underneath. Eye-catching effect in portfolios and creative brands.
• Spotlight / glow radial-gradient · JS A glow that follows the cursor inside a card or button. Brings cards to life (used on this very site on hover).

Aesthetics & effects

• Glassmorphism backdrop-filter Frosted-glass effect: blurred, translucent background. Modern floating bars, cards and menus. Seen on: tailwindcss.com, the translucent layers in its interface.
• Neumorphism box-shadow Surfaces with soft shadows that look like extruded plastic. Buttons and controls with a tactile feel (watch the contrast).
• Aurora / mesh gradient CSS Organic, diffuse gradients, often animated, used as background. Lively backgrounds without clutter (like this very site). Seen on: astro.build, the background is stacked gradients, not an image.
• Clip-path y máscaras CSS Reveal or crop content with shapes (clip-path, mask). Stylish reveals, uncovering text and image transitions. Seen on: vercel.com, crops and fades edges with CSS masks, no images.
• View Transitions CSS/JS API Native animated transition between two states or pages. Theme changes and smooth navigation (used by this site's theme toggle). Seen on: astro.build, page-to-page transitions handled by the browser API.
• Skeleton loaders CSS Animated gray placeholders shown while the real content loads. Perceived speed; they avoid blank screens. Seen on: github.com, loading gaps keep the shape of what is coming.
• Tipografía cinética GSAP SplitText Animate text by letters or words (appear, slide, distort). High-impact headlines and brand intros.
• Noise / grain SVG · CSS Subtle grain texture over backgrounds and gradients. Gives a warm, analog finish, less flat. Seen on: linear.app, a grain layer over the color to take the plastic out.
• Preloader JS An initial loading screen or bar while the site gets ready. Cover heavy resource loading, in moderation (never endless).

Performance & best practices

• Animar transform/opacity GPU Animate only transform and opacity, never top/left/width/height. It's the only thing the GPU composes cheaply, giving 60fps with no jank. Seen on: apple.com, moves with transform, never top or left, which forces a relayout.
• will-change CSS Tells the browser which property will change so it prepares a layer. Use it sparingly: overusing it wastes memory. Seen on: framer.com, warns the browser what is about to move, 258 times on its home page.
• Core Web Vitals Métrica LCP (<2.5s), INP (<200ms) and CLS (<0.1): Google's experience metrics. If an effect worsens them, lower its intensity or move it to native CSS. Seen on: developer.mozilla.org, flags which image loads first so the LCP does not suffer.
• prefers-reduced-motion CSS media System preference to reduce animations (accessibility). Respect it to avoid motion sickness; or, if your brand decides, offer a switch to turn motion off. Seen on: stripe.com, a hundred and ten rules honoring reduced motion.
• Progressive enhancement Método Content works and reads without JS; the effect goes on top. Robustness: if JS fails, the site is still usable. Seen on: apple.com, the page still says something with JavaScript off.
• Responsive / mobile-first CSS Design for mobile first and scale up. Most traffic is mobile; effects must run at 60fps there too. Seen on: framer.com, serves a different image depending on screen width.
• Lazy loading loading="lazy" Load images and resources only as they approach the viewport. Speeds up initial load and saves data. Seen on: clerk.com, ninety-seven images that wait until needed.
• Debounce y throttle JS Limit how often a function runs on frequent events (scroll, resize, input). Avoids extra work and keeps things smooth.
• requestAnimationFrame JS Sync JS animations with the browser's screen refresh. Smooth 60fps animations without clogging the main thread. Seen on: vercel.com, hooks its animations to the browser frame clock.

Modern CSS

• Container queries @container Styles based on the container's size, not the window's. Truly reusable components that adapt to their slot. Seen on: vercel.com, its CSS carries ninety-six container queries.
• Fluid typography clamp() Font sizes that scale smoothly between a min and a max. Type that looks good from mobile to large screens with no jumps. Seen on: vercel.com, sizes are computed with clamp, no jumps.
• :has() CSS The 'parent selector': style an element based on what it contains. Styling logic previously impossible without JS. Seen on: vercel.com, used over a hundred times to react to a child.
• Cascade layers @layer Organize CSS priority into layers to avoid specificity wars. Keep CSS tidy in large projects. Seen on: stripe.com, orders its CSS in layers instead of fighting specificity.
• color-mix() CSS Mix two colors directly in CSS. Generate shades, hovers and transparencies from a base color (used a lot on this site). Seen on: tailwindcss.com, over a thousand mixed colors in its stylesheet.
• Subgrid CSS grid Let a child element inherit the parent's grid lines. Align cards and lists perfectly. Seen on: vercel.com, child grids lining up with their parent.
• Logical properties CSS Properties by logical axis (inline/block) instead of left/right/top/bottom. Automatic support for right-to-left (RTL) languages. Seen on: stripe.com, logical margins, so the site can flip direction.