Cinematic Blur Word Reveal

[{"id":"13a0c5ee-f7f7-40b2-ab69-64d1038cddf8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"37c2e241-635e-40a8-ae86-b7ab77cad847","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7ff4c782-1d0d-4ca3-9fb3-58dd14f533b6","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: \\\"Avenir Next\\\", Avenir, system-ui, sans-serif;\\n}\\n\\n.blur-word-scene {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #000000;\\n overflow: hidden;\\n}\\n\\n.blur-word-container {\\n max-width: 1024px;\\n padding: 0 32px;\\n text-align: center;\\n}\\n\\n.blur-word-line {\\n margin: 0;\\n\\n color: #ffffff;\\n font-size: clamp(36px, 7vw, 72px);\\n font-weight: 300;\\n line-height: 1.45;\\n letter-spacing: 0.03em;\\n}\\n\\n.blur-word-unit {\\n display: inline-block;\\n margin-right: 0.35em;\\n\\n opacity: 0;\\n\\n filter: blur(var(--blur-start)) brightness(0.6);\\n transform: translateY(20px) scale(var(--scale-start)) rotateX(-15deg);\\n\\n text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);\\n\\n transition:\\n opacity var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n filter var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n transform var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n text-shadow var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n\\n transition-delay: var(--word-delay);\\n\\n transform-style: preserve-3d;\\n backface-visibility: hidden;\\n will-change: opacity, filter, transform;\\n}\\n\\n.blur-word-scene.is-visible .blur-word-unit {\\n opacity: 1;\\n\\n filter: blur(0) brightness(1);\\n transform: translateY(0) scale(1) rotateX(0deg);\\n\\n text-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .blur-word-unit {\\n opacity: 1;\\n filter: none;\\n transform: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Cinematic Blur Word Reveal\\n \\n \\n \\n \\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const blurWordScene = document.querySelector(\\\"#blurWordScene\\\");\\nconst blurWordLine = document.querySelector(\\\"#blurWordLine\\\");\\n\\nconst defaultText =\\n \\\"Elegant blur animation that brings your words to life with cinematic transitions.\\\";\\n\\nconst animationDelay = 4000;\\n\\nlet animationTimer = null;\\nlet resetTimer = null;\\n\\nfunction createWordData(text) {\\n const words = text.trim().split(\\\" \\\");\\n const totalWords = words.length;\\n\\n return words.map((word, index) => {\\n const progress = index / totalWords;\\n const exponentialDelay = Math.pow(progress, 0.8) * 0.5;\\n const baseDelay = index * 0.06;\\n const microVariation = (Math.random() - 0.5) * 0.05;\\n\\n return {\\n text: word,\\n duration: 2.2 + Math.cos(index * 0.3) * 0.3,\\n delay: baseDelay + exponentialDelay + microVariation,\\n blur: 12 + Math.floor(Math.random() * 8),\\n scale: 0.9 + Math.sin(index * 0.2) * 0.05,\\n };\\n });\\n}\\n\\nfunction renderWords(words) {\\n blurWordLine.innerHTML = \\\"\\\";\\n\\n words.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.className = \\\"blur-word-unit\\\";\\n span.textContent = word.text;\\n\\n span.style.setProperty(\\\"--word-duration\\\", `${word.duration}s`);\\n span.style.setProperty(\\\"--word-delay\\\", `${word.delay}s`);\\n span.style.setProperty(\\\"--blur-start\\\", `${word.blur}px`);\\n span.style.setProperty(\\\"--scale-start\\\", word.scale);\\n\\n blurWordLine.appendChild(span);\\n });\\n}\\n\\nfunction getMaxAnimationTime(words) {\\n return words.reduce((maxTime, word) => {\\n return Math.max(maxTime, word.delay + word.duration);\\n }, 0);\\n}\\n\\nfunction startBlurReveal(words) {\\n blurWordScene.classList.remove(\\\"is-visible\\\");\\n\\n clearTimeout(animationTimer);\\n clearTimeout(resetTimer);\\n\\n animationTimer = setTimeout(() => {\\n blurWordScene.classList.add(\\\"is-visible\\\");\\n\\n const maxTime = getMaxAnimationTime(words);\\n\\n resetTimer = setTimeout(\\n () => {\\n blurWordScene.classList.remove(\\\"is-visible\\\");\\n\\n setTimeout(() => {\\n startBlurReveal(words);\\n }, animationDelay);\\n },\\n (maxTime + 1) * 1000,\\n );\\n }, 200);\\n}\\n\\nconst text = blurWordScene.dataset.text || defaultText;\\nconst wordData = createWordData(text);\\n\\nrenderWords(wordData);\\nstartBlurReveal(wordData);\\n\\nwindow.addEventListener(\\\"beforeunload\\\", () => {\\n clearTimeout(animationTimer);\\n clearTimeout(resetTimer);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"3d4e9da6-a7f6-415f-8b4c-c8be50df25be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"fb058f45-0747-42c2-a958-2a24c45cf32c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"4a730e2c-bdcf-4d58-837d-b32fce418156","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\\n \\n

\\n

\\n \\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9db43107-3ff8-4148-a60a-d2404d6e5463","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3df8b02b-917a-4567-a1eb-569818ff3e4b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: \\\"Avenir Next\\\", Avenir, system-ui, sans-serif;\\n}\\n\\n.blur-word-scene {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #000000;\\n overflow: hidden;\\n}\\n\\n.blur-word-container {\\n max-width: 1024px;\\n padding: 0 32px;\\n text-align: center;\\n}\\n\\n.blur-word-line {\\n margin: 0;\\n\\n color: #ffffff;\\n font-size: clamp(36px, 7vw, 72px);\\n font-weight: 300;\\n line-height: 1.45;\\n letter-spacing: 0.03em;\\n}\\n\\n.blur-word-unit {\\n display: inline-block;\\n margin-right: 0.35em;\\n\\n opacity: 0;\\n\\n filter: blur(var(--blur-start)) brightness(0.6);\\n transform:\\n translateY(20px)\\n scale(var(--scale-start))\\n rotateX(-15deg);\\n\\n text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);\\n\\n transition:\\n opacity var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n filter var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n transform var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),\\n text-shadow var(--word-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n\\n transition-delay: var(--word-delay);\\n\\n transform-style: preserve-3d;\\n backface-visibility: hidden;\\n will-change: opacity, filter, transform;\\n}\\n\\n.blur-word-scene.is-visible .blur-word-unit {\\n opacity: 1;\\n\\n filter: blur(0) brightness(1);\\n transform: translateY(0) scale(1) rotateX(0deg);\\n\\n text-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .blur-word-unit {\\n opacity: 1;\\n filter: none;\\n transform: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18347d13-3a02-44bd-a37e-555bf64cd182","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"da29ae99-d68e-4634-94b9-bfce136c058f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const blurWordScene = document.querySelector(\\\"#blurWordScene\\\");\\nconst blurWordLine = document.querySelector(\\\"#blurWordLine\\\");\\n\\nconst defaultText =\\n \\\"Elegant blur animation that brings your words to life with cinematic transitions.\\\";\\n\\nconst animationDelay = 4000;\\n\\nlet animationTimer = null;\\nlet resetTimer = null;\\n\\nfunction createWordData(text) {\\n const words = text.trim().split(\\\" \\\");\\n const totalWords = words.length;\\n\\n return words.map((word, index) => {\\n const progress = index / totalWords;\\n const exponentialDelay = Math.pow(progress, 0.8) * 0.5;\\n const baseDelay = index * 0.06;\\n const microVariation = (Math.random() - 0.5) * 0.05;\\n\\n return {\\n text: word,\\n duration: 2.2 + Math.cos(index * 0.3) * 0.3,\\n delay: baseDelay + exponentialDelay + microVariation,\\n blur: 12 + Math.floor(Math.random() * 8),\\n scale: 0.9 + Math.sin(index * 0.2) * 0.05,\\n };\\n });\\n}\\n\\nfunction renderWords(words) {\\n blurWordLine.innerHTML = \\\"\\\";\\n\\n words.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.className = \\\"blur-word-unit\\\";\\n span.textContent = word.text;\\n\\n span.style.setProperty(\\\"--word-duration\\\", `${word.duration}s`);\\n span.style.setProperty(\\\"--word-delay\\\", `${word.delay}s`);\\n span.style.setProperty(\\\"--blur-start\\\", `${word.blur}px`);\\n span.style.setProperty(\\\"--scale-start\\\", word.scale);\\n\\n blurWordLine.appendChild(span);\\n });\\n}\\n\\nfunction getMaxAnimationTime(words) {\\n return words.reduce((maxTime, word) => {\\n return Math.max(maxTime, word.delay + word.duration);\\n }, 0);\\n}\\n\\nfunction startBlurReveal(words) {\\n blurWordScene.classList.remove(\\\"is-visible\\\");\\n\\n clearTimeout(animationTimer);\\n clearTimeout(resetTimer);\\n\\n animationTimer = setTimeout(() => {\\n blurWordScene.classList.add(\\\"is-visible\\\");\\n\\n const maxTime = getMaxAnimationTime(words);\\n\\n resetTimer = setTimeout(() => {\\n blurWordScene.classList.remove(\\\"is-visible\\\");\\n\\n setTimeout(() => {\\n startBlurReveal(words);\\n }, animationDelay);\\n }, (maxTime + 1) * 1000);\\n }, 200);\\n}\\n\\nconst text = blurWordScene.dataset.text || defaultText;\\nconst wordData = createWordData(text);\\n\\nrenderWords(wordData);\\nstartBlurReveal(wordData);\\n\\nwindow.addEventListener(\\\"beforeunload\\\", () => {\\n clearTimeout(animationTimer);\\n clearTimeout(resetTimer);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1bf6fc82-1a0c-4df5-ad27-f6b6394a873b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"82e9df09-b329-4df1-bdbf-47c73c04e2b1","type":"divider","props":{},"children":[]},{"id":"95671b29-7be9-4215-ba87-0ee541140587","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6f6d6666-1651-4164-87ab-ca227a9bb725","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Name\n","styles":{"bold":true}},{"type":"text","text":"This is called ","styles":{}},{"type":"text","text":"Cinematic Blur Word Reveal","styles":{"bold":true}},{"type":"text","text":" because every word fades from blur into clear text with staggered timing.","styles":{}}],"children":[]},{"id":"a744bef4-bea3-4afe-a0f4-f26348c63844","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The scene uses a black full-screen background, large white lightweight typography, centered layout, and wide letter spacing for a cinematic look.","styles":{}}],"children":[]},{"id":"be56a506-f2af-4735-8853-cbd8fa6fd131","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Interaction\n","styles":{"bold":true}},{"type":"text","text":"There is no hover or click interaction. The animation starts automatically, reveals all words, resets, waits, and repeats.","styles":{}}],"children":[]},{"id":"e737e507-3135-4ce3-b31b-2f3b7c68cff1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"Each word starts with ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"blur()","styles":{"code":true}},{"type":"text","text":", lower brightness, ","styles":{}},{"type":"text","text":"translateY(20px)","styles":{"code":true}},{"type":"text","text":", slight scale, and a small ","styles":{}},{"type":"text","text":"rotateX()","styles":{"code":true}},{"type":"text","text":". When ","styles":{}},{"type":"text","text":".is-visible","styles":{"code":true}},{"type":"text","text":" is added, the words transition into clear, bright, stable text. CSS ","styles":{}},{"type":"text","text":"filter","styles":{"code":true}},{"type":"text","text":" is used for the blur/brightness effect, while ","styles":{}},{"type":"text","text":"transition","styles":{"code":true}},{"type":"text","text":" handles the smooth change between hidden and visible states.","styles":{}}],"children":[]},{"id":"4056c7ab-d440-4695-97af-db033d6dc766","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"61a7dbc1-80fe-4009-a675-4287b92dbbb1","type":"procode","props":{"code":".blur-word-unit {\n opacity: 0;\n filter: blur(var(--blur-start)) brightness(0.6);\n transform: translateY(20px) scale(var(--scale-start)) rotateX(-15deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xaou20iol\",\"name\":\"code\",\"code\":\".blur-word-unit {\\n opacity: 0;\\n filter: blur(var(--blur-start)) brightness(0.6);\\n transform: translateY(20px) scale(var(--scale-start)) rotateX(-15deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"64ee2689-10e0-4533-b8fc-9f210f4c75b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the starting blurry hidden state.","styles":{}}],"children":[]},{"id":"47ac2028-1656-40df-8ba0-692ef49cce24","type":"procode","props":{"code":".blur-word-scene.is-visible .blur-word-unit {\n opacity: 1;\n filter: blur(0) brightness(1);\n transform: translateY(0) scale(1) rotateX(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ppcb4moi4\",\"name\":\"code\",\"code\":\".blur-word-scene.is-visible .blur-word-unit {\\n opacity: 1;\\n filter: blur(0) brightness(1);\\n transform: translateY(0) scale(1) rotateX(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a554e6cd-a8e8-4ae6-8dbb-aa937af90974","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the final clear visible state.","styles":{}}],"children":[]},{"id":"9631b769-0368-4a70-b27c-d6cdbf6de7c4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the animation speed in JavaScript here:","styles":{}}],"children":[]},{"id":"1415f3fa-a446-4421-82ec-59898d96f068","type":"procode","props":{"code":"duration: 2.2 + Math.cos(index * 0.3) * 0.3,","language":"javascript","filename":"","files":"[{\"id\":\"xttboydse\",\"name\":\"code\",\"code\":\"duration: 2.2 + Math.cos(index * 0.3) * 0.3,\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdb5335d-46f5-4095-9904-9a8afae7593a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"2.2","styles":{"code":true}},{"type":"text","text":" to make each word reveal faster. Increase it to make the reveal slower.","styles":{}}],"children":[]},{"id":"33aaeabe-0b48-4453-95c1-8a877db21157","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Delay / Stagger\n","styles":{"bold":true}},{"type":"text","text":"Change the delay between words here:","styles":{}}],"children":[]},{"id":"235fcb1b-88cb-45fb-971e-64eca7b0e5d6","type":"procode","props":{"code":"const baseDelay = index * 0.06;","language":"javascript","filename":"","files":"[{\"id\":\"u7v8agzwf\",\"name\":\"code\",\"code\":\"const baseDelay = index * 0.06;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"20e4d748-fab9-4382-94de-29849fd13561","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Increase ","styles":{}},{"type":"text","text":"0.06","styles":{"code":true}},{"type":"text","text":" to make the words appear farther apart. Lower it to make them appear closer together.","styles":{}}],"children":[]},{"id":"4d2815ec-a0cd-4e32-9c6e-a8b63b3c3d39","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the text here:","styles":{}}],"children":[]},{"id":"7d5dd3db-44e8-46a5-bd86-4b92768d6d96","type":"procode","props":{"code":"data-text=\"Elegant blur animation that brings your words to life with cinematic transitions.\"","language":"javascript","filename":"","files":"[{\"id\":\"dtmnp9h1w\",\"name\":\"code\",\"code\":\"data-text=\\\"Elegant blur animation that brings your words to life with cinematic transitions.\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6a54946d-5184-4dc6-88bc-330c2fc5c573","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Loop Delay\n","styles":{"bold":true}},{"type":"text","text":"Change how long it waits before repeating here:","styles":{}}],"children":[]},{"id":"d40a7a26-cd79-46fe-adf8-072bd0799ef6","type":"procode","props":{"code":"const animationDelay = 4000;","language":"javascript","filename":"","files":"[{\"id\":\"oa18414vc\",\"name\":\"code\",\"code\":\"const animationDelay = 4000;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0871f8d7-6246-4ec5-bbe7-5c2cd6202a14","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"4000","styles":{"code":true}},{"type":"text","text":" to repeat faster. Increase it to wait longer.","styles":{}}],"children":[]},{"id":"ee7d7c01-b2e6-471a-b802-c98040c250a3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"The JavaScript splits the sentence into words, creates a ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" for each word, assigns custom CSS variables for duration, delay, blur, and scale, then toggles ","styles":{}},{"type":"text","text":".is-visible","styles":{"code":true}},{"type":"text","text":" with timers. ","styles":{}},{"type":"text","text":"setTimeout()","styles":{"code":true}},{"type":"text","text":" is used to schedule each phase of the animation.","styles":{}}],"children":[]},{"id":"77fae59e-f122-4d72-82a2-bc3c3853a60c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]