WEB DESIGN ATLAS / 28
Turn a look into a clear request.
Compare 28 terms through original visual examples. Find a pattern, try its behavior, and take the instruction to your AI or designer.
UI references and selection ↗Scroll down to advance the effects and up to reverse them. Select Reduce motion for static examples.
28 results
No examples match. Change your query or category.
Align items in rows and columns.
When to use it Compare similar items
Implement this treatment. Grid. Align items in rows and columns. Compare similar items. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Combine large and small cells.
When to use it Vary space by feature
Implement this treatment. Bento grid. Combine large and small cells. Vary space by feature. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Divide the view into two panels.
When to use it Compare explanation and illustration
Implement this treatment. Split screen. Divide the view into two panels. Compare explanation and illustration. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Use unequal widths and positions.
When to use it Emphasize one element
Implement this treatment. Asymmetric layout. Use unequal widths and positions. Emphasize one element. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Leave space around elements.
When to use it Separate groups of information
Implement this treatment. Whitespace. Leave space around elements. Separate groups of information. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Combine a large headline with columns.
When to use it Guide reading order
Implement this treatment. Editorial layout. Combine a large headline with columns. Guide reading order. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Blur the background behind a translucent panel.
When to use it Overlay a secondary panel
Implement this treatment. Glassmorphism. Blur the background behind a translucent panel. Overlay a secondary panel. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Use light and dark shadows to suggest relief.
When to use it Give a decorative panel soft depth
Implement this treatment. Neumorphism. Use light and dark shadows to suggest relief. Give a decorative panel soft depth. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Use thick outlines and offset shadows.
When to use it Create strong visual separation
Implement this treatment. Neo-brutalism. Use thick outlines and offset shadows. Create strong visual separation. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Blend colors continuously.
When to use it Add color variation to a background
Implement this treatment. Gradient. Blend colors continuously. Add color variation to a background. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Map dark and light areas to two colors.
When to use it Unify the color treatment of imagery
Implement this treatment. Duotone. Map dark and light areas to two colors. Unify the color treatment of imagery. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Draw only the outline of letters.
When to use it Create a short decorative heading
Implement this treatment. Outline typography. Draw only the outline of letters. Create a short decorative heading. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Appear gradually from transparent.
When to use it Introduce an element gently
Implement this treatment. Fade-in. Appear gradually from transparent. Introduce an element gently. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Move into view from an offset position.
When to use it Show where an element enters
Implement this treatment. Slide-in. Move into view from an offset position. Show where an element enters. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Reveal several elements with delays.
When to use it Show the order of items
Implement this treatment. Stagger. Reveal several elements with delays. Show the order of items. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Reveal a line upward through a clipped area.
When to use it Introduce a short heading
Implement this treatment. Text reveal. Reveal a line upward through a clipped area. Introduce a short heading. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Expand a visible region to reveal content.
When to use it Introduce an illustration or photo
Implement this treatment. Mask reveal. Expand a visible region to reveal content. Introduce an illustration or photo. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Change from blurred to sharp.
When to use it Add a short entrance effect
Implement this treatment. Blur-in. Change from blurred to sharp. Add a short entrance effect. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Show text one character at a time.
When to use it Reveal a short message gradually
Implement this treatment. Typewriter. Show text one character at a time. Reveal a short message gradually. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Increase a number to its final value.
When to use it Emphasize a numerical result
Implement this treatment. Count-up. Increase a number to its final value. Emphasize a numerical result. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Change the display with scroll progress.
When to use it Show reading position in a progress bar
Implement this treatment. Scroll-linked animation. Change the display with scroll progress. Show reading position in a progress bar. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Move foreground and background at different speeds.
When to use it Suggest depth in decorative imagery
Implement this treatment. Parallax. Move foreground and background at different speeds. Suggest depth in decorative imagery. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Scale an image with scroll progress.
When to use it Draw attention to an image detail
Implement this treatment. Scroll zoom. Scale an image with scroll progress. Draw attention to an image detail. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Swap ordered frames with scroll progress.
When to use it Show a shape changing in stages
Implement this treatment. Image sequence. Swap ordered frames with scroll progress. Show a shape changing in stages. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Keep an element in position within its container.
When to use it Keep an illustration beside scrolling text
Implement this treatment. Sticky. Keep an element in position within its container. Keep an illustration beside scrolling text. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Align to a section after scrolling.
When to use it Compare cards one at a time
Implement this treatment. Scroll snap. Align to a section after scrolling. Compare cards one at a time. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Draw a path progressively from its start.
When to use it Show a route or connection
Implement this treatment. SVG line draw. Draw a path progressively from its start. Show a route or connection. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Scroll the page to try
Move a line of text horizontally.
When to use it Repeat short decorative words
Implement this treatment. Marquee. Move a line of text horizontally. Repeat short decorative words. Specify the target and trigger. For scroll-linked motion, use the element’s page position and scroll distance, and reverse when scrolling up. Keep essential text readable. Support 320px screens and keyboard controls. Show the completed static view with reduced motion.
Using the terms
Distance, duration and direction change the result. Specify the element, action, trigger, amount, duration and repetition. Check narrow screens and reduced motion after implementation.
Informal design names may have no single standard definition. Each description and example explains the meaning used here.
Maintain text contrast and recognizable controls when adding surface effects. Keep motion brief, keep content available, and provide a stop control. Offer a static view for parallax and zoom.
These demos use fictional content and original shapes. Explanations and instructions are included in HTML. Demo HTML, CSS and JS are available under MIT, separately from the rest of the site.
Demo source ↓ MIT