# Fill Scanline (`.sds-input-fill-scanline`)

One soft scanline crosses the field on focus, then drifts back and parks at the caret edge. Inputs animation in SDS Motion Forge v5.0.0. It plays once as soon as the class is applied.

- Page: https://sds-motion-forge.netlify.app/animations/input-fill-scanline/
- Category: Inputs (https://sds-motion-forge.netlify.app/categories/inputs/)
- Animated properties: opacity, transform
- Compositor-only: yes
- Needs child elements: no
- Needs per-character spans: no
- JavaScript: none required

## Use it

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/inputs.min.css" />

<div class="sds-input-fill-scanline">
  <input placeholder="Type here" />
</div>
```

## How it works

Plays when the field receives focus. It animates opacity and movement and scale (transform) — compositor-only, so it never causes page reflow. `--sds-duration-base` controls the speed and `--sds-ease-standard` controls the feel — override either on the element or :root (the sds-fast/sds-slow modifier classes do exactly that).

## Related

- [Fill Corner Shade](https://sds-motion-forge.netlify.app/animations/input-fill-corner-shade/)
- [Fill Flood](https://sds-motion-forge.netlify.app/animations/input-fill-flood/)
- [Fill Meter](https://sds-motion-forge.netlify.app/animations/input-fill-meter/)
- [Fill Pulse Floor](https://sds-motion-forge.netlify.app/animations/input-fill-pulse-floor/)
- [Fill Rise](https://sds-motion-forge.netlify.app/animations/input-fill-rise/)
- [Fire](https://sds-motion-forge.netlify.app/animations/input-fire/)
- [Flicker](https://sds-motion-forge.netlify.app/animations/input-flicker/)
- [Flow](https://sds-motion-forge.netlify.app/animations/input-flow/)