# Premium Fullscreen Blur Menu
> Fullscreen blur menu with GSAP stagger reveals, expanding characters, and a slash wipe for smooth open and close motion.
**Definition:** Premium Fullscreen Blur Menu is a navigation UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects.
## Facts
- Category: Navigation
- Stack: HTML, CSS, JavaScript, and GSAP
- Added: 2026-09-06
- Canonical page: https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu
- Full-page preview: https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu/full
- Live demo: https://html.bosconvertpro.com/demos/premium-fullscreen-blur-menu/index.html
- Markdown mirror: https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu/index.md
- License: https://html.bosconvertpro.com/terms
## How to use
1. Open https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu/full to preview the animation in full screen.
2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu.
3. Paste the files into your project and adjust timing, easing, and content as needed.
## FAQ
### What is Premium Fullscreen Blur Menu?
Premium Fullscreen Blur Menu is a navigation UI animation from collections.html. Fullscreen blur menu with GSAP stagger reveals, expanding characters, and a slash wipe for smooth open and close motion.
### What is Premium Fullscreen Blur Menu built with?
Premium Fullscreen Blur Menu is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project.
### How do I use Premium Fullscreen Blur Menu in my project?
Open the animation page (https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/premium-fullscreen-blur-menu/index.html.
### Is Premium Fullscreen Blur Menu free to use?
Yes. The Premium Fullscreen Blur Menu demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms.
## Source — index.html
````html
ABBOS Animations — Premium Fullscreen Blur Menu Animation
````
## Source — styles.css
````css
*{box-sizing:border-box;margin:0;padding:0}
:root{
--black:#0b0b0b;
--main:#eed1d0;
--ivory:#F5EFE1;
--gold:#C9A35C;
--cont:clamp(20px,4.5vw,80px);
--vertical:clamp(18px,3.2vw,55px);
--smooth:cubic-bezier(.76,0,.24,1);
--ease:.8s cubic-bezier(.84,0,.16,1);
--mono:'Space Mono',ui-monospace,Menlo,monospace;
--helv:'Archivo',Helvetica,Arial,sans-serif;
--edito:'Instrument Serif',Georgia,serif;
--cond:'Anton',Archivo,Helvetica,Arial,sans-serif;
}
html,body{height:100%}
body{
background:var(--black);
color:var(--main);
font-family:var(--mono);
overflow:hidden;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;cursor:pointer}
.topnav{
position:fixed;
left:0;top:0;right:0;
z-index:9;
padding-top:var(--vertical);
padding-left:var(--cont);
padding-right:var(--cont);
mix-blend-mode:difference;
color:#fff;
visibility:visible;
}
.topnav_grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:start;
}
.nav_item{
display:flex;
flex-direction:row;
gap:2ch;
line-height:1.4;
text-transform:uppercase;
font-size:clamp(14px,1.05vw,18px);
letter-spacing:.02em;
width:max-content;
}
.nav_item.right{
justify-self:end;
flex-direction:row-reverse;
cursor:pointer;
}
.nav_text{overflow:hidden;display:block}
.nav_text span{display:inline-block;white-space:nowrap}
.link-icon{display:inline-block}
.nav_logo{
position:fixed;
z-index:9;
top:var(--vertical);
left:50%;
transform:translateX(-50%);
pointer-events:none;
mix-blend-mode:difference;
color:#fff;
}
.nav_logo a{
pointer-events:auto;
display:block;
font-family:var(--cond);
font-weight:400;
font-size:clamp(30px,2.8vw,46px);
letter-spacing:.01em;
line-height:.9;
transform:translateY(-50%);
text-transform:uppercase;
}
.stage{
position:fixed;
inset:0;
user-select:none;
overflow:hidden;
background:var(--black);
}
.hero-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1fr;
gap:0;
}
.hero-cell{
position:relative;
overflow:hidden;
min-height:0;
}
.hero-cell img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:grayscale(1) contrast(1.12) brightness(.82);
transform:scale(1.02);
}
.hero-shade{
position:absolute;
inset:0;
background:color-mix(in srgb,var(--black) 35%,transparent);
pointer-events:none;
}
.burger{
position:fixed;
top:0;left:0;right:0;
height:100vh;
height:100svh;
z-index:10;
visibility:hidden;
pointer-events:none;
color:var(--ivory);
}
.burger.visible{visibility:visible !important}
.burger.active{pointer-events:auto}
.burger.active .burger_item{pointer-events:auto}
.burger_overlay{
position:absolute;
inset:0;
pointer-events:none;
background-color:color-mix(in srgb,var(--black) 50%,transparent);
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
}
.burger_inner{
position:relative;
z-index:1;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
.burger_list{
display:flex;
flex-direction:column;
position:relative;
padding-left:var(--cont);
padding-right:var(--cont);
}
.burger_row{
display:flex;
flex-direction:row;
gap:2.2vw;
align-items:flex-start;
}
.burger_item-parent{
position:relative;
display:flex;
transition:filter 1s var(--smooth),opacity 1s var(--smooth);
}
.burger:has(.burger_item-parent:hover) .burger_item-parent:not(:hover){
filter:blur(12px);
-webkit-filter:blur(12px);
opacity:.3;
}
.burger_item{
pointer-events:none;
padding-bottom:1.1vw;
position:relative;
}
.burger_inner_line{
display:flex;
flex-direction:row;
gap:15px;
align-items:flex-start;
}
.burger_index{
font-family:var(--mono);
position:relative;
overflow:hidden;
padding-top:.6em;
}
.burger_index-text{
font-size:min(1.6216216216vh,.9375vw);
line-height:1;
letter-spacing:.04em;
display:block;
color:var(--gold);
}
.burger_item-chars{
clip-path:inset(-1.2em 0);
overflow:visible;
}
.burger_letter-mask{
overflow:visible;
display:block;
}
.burger-font{
line-height:.9;
white-space:nowrap;
display:block;
text-transform:uppercase;
}
.burger-font.font-helv{
font-family:var(--cond);
font-weight:400;
font-size:min(18.5vh,10.8vw);
letter-spacing:.005em;
text-transform:uppercase;
}
.burger-font.font-editorial{
font-family:var(--cond);
font-weight:400;
font-style:normal;
font-size:min(18.5vh,10.8vw);
letter-spacing:.005em;
padding-right:.06em;
text-transform:uppercase;
}
.ch{
display:inline-block;
overflow:hidden;
vertical-align:top;
clip-path:inset(-0.2em 0);
}
.ch-in{
display:inline-block;
white-space:pre;
width:max-content;
will-change:width;
}
.burger_slash{
width:min(4.3918918919vh,2.5390625vw);
aspect-ratio:55/201;
align-self:stretch;
display:flex;
justify-content:center;
align-items:center;
flex:none;
}
.burger_slash svg{width:100%;height:100%;display:block}
.burger_slash svg path{stroke:var(--gold);}
.burger_close{
position:absolute;
right:var(--cont);
top:var(--vertical);
display:flex;
flex-direction:row;
gap:2ch;
cursor:pointer;
font-size:clamp(14px,1.05vw,18px);
line-height:1.4;
text-transform:uppercase;
z-index:2;
transition:opacity .8s var(--smooth),filter .8s var(--smooth);
opacity:0;
filter:blur(10px);
-webkit-filter:blur(10px);
}
.burger.active .burger_close{
opacity:1;
filter:blur(0);
-webkit-filter:blur(0);
}
.burger_close .plus{
display:inline-block;
transform:rotate(45deg);
}
@media screen and (max-width:1023px){
.hero-grid{grid-template-columns:1fr;grid-template-rows:1fr}
.burger_list{align-items:center;text-align:center}
.burger_row{flex-direction:column;gap:0;align-items:center}
.burger_item{padding:10px 0}
.burger_inner_line{gap:10px;align-items:flex-start;justify-content:center}
.burger_index{padding-top:12px}
.burger_index-text{font-size:11px}
.burger-font.font-helv,.burger-font.font-editorial{font-size:11.5vw;line-height:1}
.burger_slash{display:none}
.topnav{font-size:14px}
.nav_logo a{font-size:26px}
}
@media screen and (max-width:479px){
:root{--cont:20px}
.burger_item-chars{clip-path:inset(-.2em 0)}
.burger-font.font-helv,.burger-font.font-editorial{font-size:15vw}
.topnav .nav_item .nav_text:last-child{display:none}
.topnav_grid{align-items:center}
}
````
## Source — script.js
````javascript
const burger = document.querySelector('.burger');
const items = burger.querySelectorAll('.burger_item');
const trigger = document.querySelector('.nav_burger-trigger');
const overlay = burger.querySelector('.burger_overlay');
const closeTrigger = burger.querySelector('.burger_close');
let splits = [];
let tl = null;
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function splitLetters(el) {
const text = el.textContent;
el.textContent = '';
const outers = [];
const inners = [];
const setters = [];
for (let i = 0; i < text.length; i++) {
const ch = text[i];
const outer = document.createElement('span');
outer.className = 'ch';
const inner = document.createElement('span');
inner.className = 'ch-in';
inner.textContent = ch === ' ' ? '\u00A0' : ch;
outer.appendChild(inner);
el.appendChild(outer);
outers.push(outer);
inners.push(inner);
setters.push(gsap.quickSetter(outer, 'width', 'px'));
}
return { outers, inners, setters };
}
function createSplits() {
splits = [];
items.forEach((item) => {
const font = item.querySelector('.burger_letter');
const parts = splitLetters(font);
gsap.set(parts.inners, { width: 'max-content' });
gsap.set(parts.outers, { clipPath: 'inset(-0.2em 0)' });
splits.push(parts);
});
}
function createTimeline() {
splits.forEach((s) => {
s.setters.forEach((set, idx) => {
if (idx !== 0) set(0);
});
});
tl = gsap.timeline({
defaults: { ease: 'expo.inOut', duration: 1.2 },
paused: true,
onStart: () => {
burger.classList.add('active');
burger.classList.add('visible');
},
onReverseComplete: () => {
burger.classList.remove('visible');
}
});
tl.fromTo(overlay, { autoAlpha: 0 }, { autoAlpha: 1, duration: 1.2, ease: 'power2' }, 0);
items.forEach((item, s) => {
const e = s * 0.08;
const indexText = item.querySelector('.burger_index-text');
const mask = item.querySelector('.burger_letter-mask');
const slash = item.querySelector('.burger_slash');
gsap.set([indexText, mask], { clearProps: 'all' });
tl.fromTo(indexText, { yPercent: 110 }, { yPercent: 0 }, e);
tl.fromTo(mask, { yPercent: 130 }, { yPercent: 0 }, e);
tl.fromTo(slash, { clipPath: 'inset(50% 0%)' }, { clipPath: 'inset(0% 0%)' }, e);
const part = splits[s];
part.setters.forEach((set, c) => {
if (c !== 0) {
const inner = part.inners[c];
const p = e + c * 0.02 + 0.8;
const proxy = { value: 0 };
tl.fromTo(proxy, { value: 0 }, {
value: () => inner.getBoundingClientRect().width,
duration: 1.2,
ease: 'expo.inOut',
onUpdate: () => set(proxy.value)
}, p);
}
});
});
}
function openMenu() {
if (!tl) return;
tl.timeScale(1).play();
}
function closeMenu() {
if (!tl) return;
tl.timeScale(2).reverse();
burger.classList.remove('active');
}
trigger.addEventListener('click', openMenu);
closeTrigger.addEventListener('click', closeMenu);
items.forEach((item) => {
const link = item.closest('.burger_item-parent');
if (link) link.addEventListener('click', closeMenu);
});
document.addEventListener('keydown', (ev) => {
if (ev.key === 'Escape' && burger.classList.contains('active')) closeMenu();
});
window.addEventListener('resize', () => {
if (tl) tl.kill();
items.forEach((item) => {
const font = item.querySelector('.burger_letter');
const full = font.getAttribute('data-text');
if (full) font.textContent = full;
});
document.querySelectorAll('.burger_letter').forEach((el) => {
if (!el.getAttribute('data-text')) el.setAttribute('data-text', el.textContent);
});
createSplits();
createTimeline();
if (burger.classList.contains('active')) {
tl.progress(1);
splits.forEach((s) => {
s.setters.forEach((set, idx) => {
if (idx !== 0) {
const inner = s.inners[idx];
set(inner.getBoundingClientRect().width);
}
});
});
}
});
document.querySelectorAll('.burger_letter').forEach((el) => {
el.setAttribute('data-text', el.textContent);
});
createSplits();
createTimeline();
gsap.set(burger, { visibility: 'visible' });
gsap.set(burger, { visibility: 'hidden' });
burger.style.visibility = '';
function scramble(el) {
const original = el.textContent;
const chars = original.split('');
let frame = 0;
const total = Math.max(chars.length * 3, 30);
clearInterval(el._scr);
el._scr = setInterval(() => {
frame++;
const progress = frame / total * chars.length * 1.6;
let out = '';
for (let i = 0; i < chars.length; i++) {
if (chars[i] === ' ' || chars[i] === '(' || chars[i] === ')' || chars[i] === '+') {
out += chars[i];
} else if (i < progress) {
out += original[i];
} else {
out += alphabet[Math.floor(Math.random() * 26)];
}
}
el.textContent = out;
if (progress >= chars.length) {
clearInterval(el._scr);
el.textContent = original;
}
}, 30);
}
document.querySelectorAll('[data-hover]').forEach((el) => {
el._orig = el.textContent;
const parent = el.closest('.nav_item') || el.closest('.burger_close') || el;
parent.addEventListener('mouseenter', () => scramble(el));
parent.addEventListener('mouseleave', () => {
clearInterval(el._scr);
el.textContent = el._orig;
});
});
````
