[{"id":"4f8a4d67-d774-4d03-9c38-60ff48d42ac4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a32b0fe2-f0ee-426b-9d2a-3ad194d5145b","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 --gradient-colors: linear-gradient(\\n 110deg,\\n rgba(255, 255, 255, 0.35) 0%,\\n rgba(255, 255, 255, 0.35) 35%,\\n #ffffff 50%,\\n rgba(255, 255, 255, 0.35) 65%,\\n rgba(255, 255, 255, 0.35) 100%\\n );\\n --text-shadow-hover: 0 0 8px rgba(255, 255, 255, 0.3);\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\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.animated-text {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 32px 0;\\n}\\n\\n.animated-text__title {\\n font-size: clamp(3rem, 10vw, 4rem);\\n font-weight: 700;\\n line-height: normal;\\n background: var(--gradient-colors);\\n background-size: 200% auto;\\n background-position: 100% 0;\\n background-clip: text;\\n -webkit-background-clip: text;\\n color: transparent;\\n -webkit-text-fill-color: transparent;\\n animation: shiny-sweep 3s linear infinite;\\n transition: text-shadow 220ms ease;\\n}\\n\\n.animated-text__title.is-hovered {\\n text-shadow: var(--text-shadow-hover);\\n}\\n\\n@keyframes shiny-sweep {\\n from {\\n background-position: 100% 0;\\n }\\n to {\\n background-position: -100% 0;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .animated-text__title {\\n font-size: clamp(1.5rem, 16vw, 2.5rem);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .animated-text__title {\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Animated Shiny 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\"}]","template":"vanilla-ts","activeFile":"/styles.css","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"33acba13-a365-4518-9fc3-90430fdb9c90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5848031c-3f91-4c49-bb3c-f83dc6a6ff37","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"061470c8-f167-444d-9620-7bfa7027054f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n mindory.space\\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccc2ebea-d295-4176-9f62-9d533104dcf8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"936aab6b-0b17-43fc-9e2a-cd84e4e7ea42","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"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 --gradient-colors: linear-gradient(\\n 110deg,\\n rgba(255, 255, 255, 0.35) 0%,\\n rgba(255, 255, 255, 0.35) 35%,\\n #ffffff 50%,\\n rgba(255, 255, 255, 0.35) 65%,\\n rgba(255, 255, 255, 0.35) 100%\\n );\\n --text-shadow-hover: 0 0 8px rgba(255, 255, 255, 0.3);\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\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.animated-text {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 32px 0;\\n}\\n\\n.animated-text__title {\\n font-size: clamp(3rem, 10vw, 4rem);\\n font-weight: 700;\\n line-height: normal;\\n background: var(--gradient-colors);\\n background-size: 200% auto;\\n background-position: 100% 0;\\n background-clip: text;\\n -webkit-background-clip: text;\\n color: transparent;\\n -webkit-text-fill-color: transparent;\\n animation: shiny-sweep 3s linear infinite;\\n transition: text-shadow 220ms ease;\\n}\\n\\n.animated-text__title.is-hovered {\\n text-shadow: var(--text-shadow-hover);\\n}\\n\\n@keyframes shiny-sweep {\\n from {\\n background-position: 100% 0;\\n }\\n to {\\n background-position: -100% 0;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .animated-text__title {\\n font-size: clamp(1.5rem, 16vw, 2.5rem);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .animated-text__title {\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f84f9d6f-825b-4ec4-ae95-facd2d771e7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a5dd46f5-c388-496e-a3b9-d11fa0d4a618","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]