Describe the change a user gets instead of listing features.
<div class="pair"><div class="feature"><small>FEATURE</small><b>Automatic sorting</b></div><div class="hinge">→</div><div class="benefit"><small>YOUR DAY</small><b>Spend less time filing.<br>Find work faster.</b></div></div>.pair{display:flex;align-items:center;width:88%;max-width:760px;gap:clamp(4px,1.5vmin,18px);font-family:sans-serif}.feature,.benefit{box-sizing:border-box;min-width:0;flex:1;padding:clamp(10px,2.5vmin,24px);border:2px solid var(--line);background:var(--surface)}small{display:block;margin-bottom:.8em;font:900 clamp(10px,max(1.5vmin,1vw),12px) sans-serif;letter-spacing:.13em;color:var(--muted)}b{font:850 clamp(12px,3vmin,28px)/1.15 sans-serif}.feature{animation:dim 4s infinite}.benefit{border-color:var(--accent);animation:open 4s infinite}.hinge{color:var(--accent);font-size:clamp(18px,5vmin,42px);animation:shift 4s infinite}@keyframes dim{0%,20%{opacity:1}45%,85%{opacity:.45}100%{opacity:1}}@keyframes open{0%,20%{transform:scale(.9);opacity:.35}42%,85%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.35}}@keyframes shift{0%,20%{transform:translateX(-6px)}50%,85%{transform:translateX(3px)}100%{transform:translateX(-6px)}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}Benefit-led copy translates a product attribute into a change in the customer's work or life. Keep the feature visible when a technical buyer needs to evaluate it.
In the demo, automatic sorting unfolds into a time-saving benefit. In real copy, support the outcome with a concrete use case or evidence.
Use it when turning a feature list into landing cards or ad copy.