Cyberpunk
- Source
- Uiverse ↗
- Author
- MijailVillegas
- Licence
- MIT
Loading…
Code
<form class="container" action="">
<div class="input-container">
<div class="input-content">
<div class="input-dist">
<div class="input-type">
<input class="input-is" type="text" required="" placeholder="User" />
<input
class="input-is"
type="password"
required=""
placeholder="Password"
/>
</div>
</div>
</div>
</div>
<button class="submit-button">Log in</button>
</form>Prompt
Build "Cyberpunk", a input animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes. It sits on a dark background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/MijailVillegas/grumpy-horse-85 (MijailVillegas, MIT).