Fullscreen Morph
A copy-paste video player ui component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Video Player UIHTMLCSSany framework
Copy into your project
HTML
<!-- Fullscreen Morph — corners spread on hover; collapse with .is-fs -->
<button class="nuda-fs" type="button" aria-label="Fullscreen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path class="nuda-fs__c1" d="M8 3 L3 3 L3 8" />
<path class="nuda-fs__c2" d="M16 3 L21 3 L21 8" />
<path class="nuda-fs__c3" d="M8 21 L3 21 L3 16" />
<path class="nuda-fs__c4" d="M16 21 L21 21 L21 16" />
</svg>
</button>CSS
/* Fullscreen Morph
Four corner brackets fly outward on hover (entering FS) or inward when active.
Customize: --fs-accent */
.nuda-fs {
--fs-accent: #e4ff54;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
color: #fafafa;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
}
.nuda-fs:hover {
background: rgba(228, 255, 84, 0.1);
color: var(--fs-accent);
}
.nuda-fs svg { width: 18px; height: 18px; }
.nuda-fs path {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.nuda-fs:hover .nuda-fs__c1 { transform: translate(-2px, -2px); }
.nuda-fs:hover .nuda-fs__c2 { transform: translate(2px, -2px); }
.nuda-fs:hover .nuda-fs__c3 { transform: translate(-2px, 2px); }
.nuda-fs:hover .nuda-fs__c4 { transform: translate(2px, 2px); }
.nuda-fs.is-fs .nuda-fs__c1 { transform: translate(2px, 2px); }
.nuda-fs.is-fs .nuda-fs__c2 { transform: translate(-2px, 2px); }
.nuda-fs.is-fs .nuda-fs__c3 { transform: translate(2px, -2px); }
.nuda-fs.is-fs .nuda-fs__c4 { transform: translate(-2px,-2px); }How to use Fullscreen Morph
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.