[{"id":"cc45ce3a-1900-4456-bf3c-0476ce2d2e1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"133b9685-39a1-4a2f-b370-8f2520b2e350","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n}\\n\\n:root {\\n --page-bg: #050505;\\n --highlight-bg: #7c3aff;\\n --text-color: #ffffff;\\n\\n --duration: 1.5s;\\n --ease: ease-in-out;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\n color: var(--text-color);\\n}\\n\\n.preview {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 32px;\\n}\\n\\n.reveal-text {\\n text-align: center;\\n}\\n\\n.reveal-text__heading {\\n max-width: 900px;\\n font-size: clamp(3rem, 10vw, 5rem);\\n font-weight: 700;\\n line-height: 1.5;\\n letter-spacing: -0.055em;\\n}\\n\\n.reveal-text__highlight {\\n position: relative;\\n display: inline-block;\\n margin: 0 8px 5px;\\n padding: 10px 14px;\\n border-radius: 10px;\\n color: var(--text-color);\\n background: var(--highlight-bg);\\n clip-path: inset(0 100% 0 0);\\n animation: reveal-highlight var(--duration) var(--ease) forwards;\\n}\\n\\n@keyframes reveal-highlight {\\n from {\\n clip-path: inset(0 100% 0 0);\\n }\\n\\n to {\\n clip-path: inset(0 0% 0 0);\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .reveal-text__heading {\\n font-size: clamp(2.2rem, 14vw, 3.5rem);\\n }\\n\\n .reveal-text__highlight {\\n padding: 8px 12px;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .reveal-text__highlight {\\n clip-path: inset(0 0% 0 0);\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple Reveal Text\\n \\n \\n\\n \\n

\\n

\\n mindory.space\\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\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"47443ee5-43b0-4a00-869e-5f25577c12f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c47832db-6841-40b9-b8dc-ce16e6ec6b13","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6455347e-6c00-4459-b412-d7f80c6ddae0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The text uses a dark page background with a purple reveal background behind ","styles":{}},{"type":"text","text":"mindory.space","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"e5d58913-d35e-42ba-9b97-ee0d9a909abd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{"bold":true}}],"children":[]},{"id":"ac924e55-72c4-4d89-977d-0cc0c908b70a","type":"procode","props":{"code":".preview {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bqm5n3oht\",\"name\":\"code\",\"code\":\".preview {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69aa5950-82bd-4508-a3c1-d9b330848320","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content","styles":{"bold":true}}],"children":[]},{"id":"5aa6cd73-7ef6-40b4-9da8-4dc05fdd3fa0","type":"procode","props":{"code":"mindory.space","language":"javascript","filename":"","files":"[{\"id\":\"g4xyrxkzw\",\"name\":\"code\",\"code\":\"mindory.space\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18f0e539-c9bc-4274-80c5-f9b4c5fb8fc2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reveal Animation\n","styles":{"bold":true}},{"type":"text","text":"The purple background and text reveal from left to right using ","styles":{}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4e0eddfe-1e98-4c4d-95f2-df93ec91029b","type":"procode","props":{"code":".reveal-text__highlight {\n clip-path: inset(0 100% 0 0);\n animation: reveal-highlight var(--duration) var(--ease) forwards;\n}","language":"javascript","filename":"","files":"[{\"id\":\"idzd6n4c1\",\"name\":\"code\",\"code\":\".reveal-text__highlight {\\n clip-path: inset(0 100% 0 0);\\n animation: reveal-highlight var(--duration) var(--ease) forwards;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7ccc01c8-bf7d-4733-8bc2-6b110e16a434","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"6f4699d8-52f7-452b-9203-09aa8a930d7c","type":"procode","props":{"code":"@keyframes reveal-highlight {\n from {\n clip-path: inset(0 100% 0 0);\n }\n\n to {\n clip-path: inset(0 0% 0 0);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"ic6u1j7jy\",\"name\":\"code\",\"code\":\"@keyframes reveal-highlight {\\n from {\\n clip-path: inset(0 100% 0 0);\\n }\\n\\n to {\\n clip-path: inset(0 0% 0 0);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"02672be9-e87f-4737-a16b-5a066971fcd5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration","styles":{"bold":true}}],"children":[]},{"id":"4583713f-9531-43aa-b818-b98a095f054d","type":"procode","props":{"code":"--duration: 1.5s;","language":"javascript","filename":"","files":"[{\"id\":\"z9hu5pelg\",\"name\":\"code\",\"code\":\"--duration: 1.5s;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c39faba1-62be-4191-96bd-0ebde0f24d6e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Easing","styles":{"bold":true}}],"children":[]},{"id":"f519d797-2dc7-4448-b83b-15b1950366b9","type":"procode","props":{"code":"--ease: ease-in-out;","language":"javascript","filename":"","files":"[{\"id\":\"dqf4lqc4v\",\"name\":\"code\",\"code\":\"--ease: ease-in-out;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33c71d29-fe1d-40c1-b29e-818747f55d2b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color","styles":{"bold":true}}],"children":[]},{"id":"dce43e8d-291b-46fa-9e12-bcab6ee5d610","type":"procode","props":{"code":"--page-bg: #050505;\n--highlight-bg: #7c3aff;\n--text-color: #ffffff;","language":"javascript","filename":"","files":"[{\"id\":\"rnhfgaob4\",\"name\":\"code\",\"code\":\"--page-bg: #050505;\\n--highlight-bg: #7c3aff;\\n--text-color: #ffffff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb5f6c3d-c002-464b-95ed-7e2199ff6f56","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"No JavaScript is needed. The reveal effect is pure CSS.","styles":{}}],"children":[]},{"id":"2b320183-5c3f-4054-9e32-5c65fdc1202c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]