Skip to content
Motion Atlas

Live examples of what AI can make for a website, each with the prompt that asks for it and the source to copy.

All examples / feature card

Isometric search: magnifier over file stacks

Three stacks of paper files stand on an isometric platform; a magnifier glides across them, pauses over the middle stack, and the matching file lifts out with a soft mint glow before settling back.

Prompt tested

A magnifier sweeps over three stacks of files and one file lifts out as the match
Large
A magnifier sweeps over three stacks of files and one file lifts out as the match

Feature card size

Prompt

Draw a looping isometric illustration for a 'Search' feature card as one inline SVG with CSS keyframes only (no JavaScript, no libraries). Scene: a light paper-coloured isometric platform (30° projection) with three stacks of paper files in a row running diagonally from back-left to front-right. Each stack is a light paper block with thin page lines on its sides, topped by a file with two grey text lines and a small coloured tab (light blue, mint, warm yellow). A magnifying glass (light-blue tinted lens with a pale rim and a short slate handle pointing down-right) hovers above the stacks. Motion: the magnifier glides from the left stack to the middle stack and pauses there; while it pauses, the middle stack's top file (the mint one) lifts up out of the stack with a soft mint glow under it, then settles back; the magnifier moves on to the right stack, then glides back to the left, rising a little as it passes over. Use a navy outline (#1F2A44, 1.5 px, round joins) and the palette ink #1F2A44, slate #5B6B8C, sky #7FB6FF, mint #6FD6B4, sun #FFC861, coral #FF8A7A, paper #F6F4EF; shade each block with a light top, mid right face and darker left face. Loop every 6 seconds with no visible jump; animate only transform and opacity; add a prefers-reduced-motion rule that stops all animation and leaves a calm still frame with the magnifier over the middle stack and the mint file lifted and glowing.

Prompt test

A fresh AI session given only the prompt above rebuilt this on 2026-11-03 using claude-opus-5-5; a separate fresh session using claude-opus-5-5 judged it “like this”.

The original example
Original
The rebuild made from the prompt alone
Rebuilt from the prompt

Lesson: Describing the sweep as stops (left stack, pause over the middle, right stack, glide back rising a little) and tying the lift to "while it pauses" gave matching choreography first time; "light paper block" alone let the rebuild shade the stack sides warm beige, so name the side-face colours (slate-grey, not beige) when the cool palette matters.

Words it rests on

  • isometric illustration (30° projection)
  • inline SVG
  • CSS @keyframes
  • seamless loop
  • sweep with a hold (keyframe plateau)
  • lift-out highlight
  • three-tone face shading
  • prefers-reduced-motion still frame
  • feature card

Facts

Tags
feature card css keyframes inline svg isometric flat shaded harbor
Weight
1.7 KB gzip (SVG + CSS)
Needs
No library, no JavaScript
Browser support
All current browsers (Chrome, Edge, Firefox, Safari 15+); CSS transforms on SVG groups.
Loop
6 s, seamless; still frame with reduced motion
Link
/examples/iso-search/

Source

Paste both parts into any page. Wrap the SVG in <div class="ma-iso-search"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-iso-search, so it will not clash with your styles.

demo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" role="img" aria-labelledby="ma-iso-search-title">
<title id="ma-iso-search-title">A magnifier sweeps over three stacks of files and one file lifts out as the match</title>
<g stroke="#1F2A44" stroke-width="1.5" stroke-linejoin="round">
<path d="M156.3 93.7L346.8 203.7L232.5 269.7L42 159.7Z" fill="#1F2A44" opacity=".08"/>
<path d="M352.5 185L238.2 251L238.2 240L352.5 174Z" fill="#C9D2E3"/>
<path d="M47.7 141L238.2 251L238.2 240L47.7 130Z" fill="#A3B0C8"/>
<path d="M162 64L352.5 174L238.2 240L47.7 130Z" fill="#F6F4EF"/>
<path d="M179.3 122L148.1 140L148.1 125L179.3 107Z" fill="#C9D2E3"/>
<path d="M108.3 117L148.1 140L148.1 125L108.3 102Z" fill="#A3B0C8"/>
<path d="M139.5 84L179.3 107L148.1 125L108.3 102Z" fill="#F6F4EF"/>
<path d="M177.6 119L148.1 136" stroke="#8F9BB3" stroke-width="1"/>
<path d="M110 114L148.1 136" stroke="#7F8CA6" stroke-width="1"/>
<path d="M177.6 115L148.1 132" stroke="#8F9BB3" stroke-width="1"/>
<path d="M110 110L148.1 132" stroke="#7F8CA6" stroke-width="1"/>
<path d="M177.6 111L148.1 128" stroke="#8F9BB3" stroke-width="1"/>
<path d="M110 106L148.1 128" stroke="#7F8CA6" stroke-width="1"/>
<path d="M179.3 107L148.1 125L148.1 122L179.3 104Z" fill="#C9D2E3"/>
<path d="M108.3 102L148.1 125L148.1 122L108.3 99Z" fill="#A3B0C8"/>
<path d="M139.5 81L179.3 104L148.1 122L108.3 99Z" fill="#F6F4EF"/>
<path d="M153.3 93L148.1 96L148.1 94L153.3 91Z" fill="#7FB6FF"/>
<path d="M136 89L148.1 96L148.1 94L136 87Z" fill="#5E98E6"/>
<path d="M141.2 84L153.3 91L148.1 94L136 87Z" fill="#BFDBFF"/>
<path d="M130.8 92L158.5 108" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
<path d="M123.9 96L144.7 108" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
<path d="M234.7 154L203.6 172L203.6 157L234.7 139Z" fill="#C9D2E3"/>
<path d="M163.7 149L203.6 172L203.6 157L163.7 134Z" fill="#A3B0C8"/>
<path d="M194.9 116L234.7 139L203.6 157L163.7 134Z" fill="#F6F4EF"/>
<path d="M233 151L203.6 168" stroke="#8F9BB3" stroke-width="1"/>
<path d="M165.5 146L203.6 168" stroke="#7F8CA6" stroke-width="1"/>
<path d="M233 147L203.6 164" stroke="#8F9BB3" stroke-width="1"/>
<path d="M165.5 142L203.6 164" stroke="#7F8CA6" stroke-width="1"/>
<path d="M233 143L203.6 160" stroke="#8F9BB3" stroke-width="1"/>
<path d="M165.5 138L203.6 160" stroke="#7F8CA6" stroke-width="1"/>
<path d="M290.2 186L259 204L259 189L290.2 171Z" fill="#C9D2E3"/>
<path d="M219.2 181L259 204L259 189L219.2 166Z" fill="#A3B0C8"/>
<path d="M250.3 148L290.2 171L259 189L219.2 166Z" fill="#F6F4EF"/>
<path d="M288.4 183L259 200" stroke="#8F9BB3" stroke-width="1"/>
<path d="M220.9 178L259 200" stroke="#7F8CA6" stroke-width="1"/>
<path d="M288.4 179L259 196" stroke="#8F9BB3" stroke-width="1"/>
<path d="M220.9 174L259 196" stroke="#7F8CA6" stroke-width="1"/>
<path d="M288.4 175L259 192" stroke="#8F9BB3" stroke-width="1"/>
<path d="M220.9 170L259 192" stroke="#7F8CA6" stroke-width="1"/>
<path d="M290.2 171L259 189L259 186L290.2 168Z" fill="#C9D2E3"/>
<path d="M219.2 166L259 189L259 186L219.2 163Z" fill="#A3B0C8"/>
<path d="M250.3 145L290.2 168L259 186L219.2 163Z" fill="#F6F4EF"/>
<path d="M264.2 157L259 160L259 158L264.2 155Z" fill="#FFC861"/>
<path d="M246.9 153L259 160L259 158L246.9 151Z" fill="#E8AC3E"/>
<path d="M252.1 148L264.2 155L259 158L246.9 151Z" fill="#FFE0A3"/>
<path d="M241.7 156L269.4 172" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
<path d="M234.7 160L255.5 172" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
<g class="ma-iso-search-file">
<path d="M194.9 99L243.4 127L203.6 150L155.1 122Z" fill="#6FD6B4" stroke="none" opacity=".45" class="ma-iso-search-glow"/>
<path d="M234.7 127L203.6 145L203.6 142L234.7 124Z" fill="#C9D2E3"/>
<path d="M163.7 122L203.6 145L203.6 142L163.7 119Z" fill="#A3B0C8"/>
<path d="M194.9 101L234.7 124L203.6 142L163.7 119Z" fill="#F6F4EF"/>
<path d="M208.8 113L203.6 116L203.6 114L208.8 111Z" fill="#6FD6B4"/>
<path d="M191.4 109L203.6 116L203.6 114L191.4 107Z" fill="#4FB896"/>
<path d="M196.6 104L208.8 111L203.6 114L191.4 107Z" fill="#A8E8D2"/>
<path d="M186.2 112L214 128" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
<path d="M179.3 116L200.1 128" stroke="#A3B0C8" stroke-width="2" stroke-linecap="round"/>
</g>
<g class="ma-iso-search-lens">
<path d="M214.2 97.5L232.2 115.5" stroke-width="10" stroke-linecap="round"/>
<path d="M214.2 97.5L232.2 115.5" stroke="#5B6B8C" stroke-width="6" stroke-linecap="round"/>
<circle cx="199.2" cy="82.5" r="22" fill="#7FB6FF" fill-opacity=".28" stroke-width="7"/>
<circle cx="199.2" cy="82.5" r="22" fill="none" stroke="#E8ECF3" stroke-width="4"/>
<path d="M187.2 77.5a13 13 0 0 1 8-8" fill="none" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round"/>
</g>
</g>
</svg>

demo.css

/* Isometric search card: a magnifier sweeps across three stacks of files; under it the match lifts out.
   Loop period 6 s; the negative delay makes the first frame match the still frame. Only transform and opacity animate. */
.ma-iso-search svg {
  display: block;
  width: 100%;
  height: auto;
}

.ma-iso-search .ma-iso-search-lens,
.ma-iso-search .ma-iso-search-file,
.ma-iso-search .ma-iso-search-glow {
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -2.4s;
}

.ma-iso-search .ma-iso-search-lens { animation-name: ma-iso-search-sweep; }
.ma-iso-search .ma-iso-search-file { animation-name: ma-iso-search-lift; }
.ma-iso-search .ma-iso-search-glow { animation-name: ma-iso-search-glow; }

/* Left stack, middle stack (pause), right stack, then a lifted glide back to the left. */
@keyframes ma-iso-search-sweep {
  0%, 100% { transform: translate(-55.4px, -32px); }
  22% { transform: translate(0px, 0px); }
  60% { transform: translate(0px, 0px); }
  78% { transform: translate(55.4px, 32px); }
  88% { transform: translate(0px, -14px); }
}

/* The matching file rests on its stack, rises while the lens pauses over it, then settles. */
@keyframes ma-iso-search-lift {
  0%, 100% { transform: translate(0px, 12px); }
  26% { transform: translate(0px, 12px); }
  36% { transform: translate(0px, 0px); }
  54% { transform: translate(0px, 0px); }
  64% { transform: translate(0px, 12px); }
}

@keyframes ma-iso-search-glow {
  0%, 100% { opacity: 0; }
  30% { opacity: 0; }
  38% { opacity: 0.45; }
  54% { opacity: 0.45; }
  60% { opacity: 0; }
}

/* Calm still frame: the lens over the middle stack, the match lifted and glowing. */
@media (prefers-reduced-motion: reduce) {
  .ma-iso-search,
  .ma-iso-search * {
    animation: none !important;
  }
}