Ken Burns
A copy-paste image effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Image EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Ken Burns -->
<figure class="nuda-kb">
<img class="nuda-kb__img" src="/your-image.jpg" alt="" />
</figure>CSS
/* Ken Burns
Slow zoom + pan that loops back and forth. Cinematic on hero images.
Customize: --kb-duration, --kb-zoom */
.nuda-kb {
--kb-duration: 14s;
--kb-zoom: 1.18;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
margin: 0;
}
.nuda-kb__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: nuda-kb-pan var(--kb-duration) ease-in-out infinite alternate;
}
@keyframes nuda-kb-pan {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(var(--kb-zoom)) translate(-6%, -4%); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-kb__img { animation: none; }
}How to use Ken Burns
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.