Style Gallery.

Borders COLLECTION

Electric border

살아 있는 선

테두리 더 보기
LIVE PREVIEW
⚡Charged
with ideas.

자동 재생

이 예제의 코드HTML · CSS · JS

전체 코드를 복사해 index.html로 저장한 뒤 브라우저에서 열어보세요.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electric border</title>
<style>
body{margin:0;min-height:100vh;display:grid;place-items:center;background:#11121a}main{width:min(100%,900px)}button{font:inherit}
/* Product-owned, original visual studies. No reusable Layout CSS is imported. */
.sg-demo { --px:50%; --py:50%; --rx:0deg; --ry:0deg; background:#101018; border-radius:inherit; box-sizing:border-box; color:#f7f5fb; container-type:inline-size; display:flex; font-family:Inter,"Apple SD Gothic Neo",system-ui,sans-serif; height:250px; isolation:isolate; align-items:center; justify-content:center; overflow:hidden; position:relative; width:100%; }
.sg-demo *, .sg-demo *::before, .sg-demo *::after { box-sizing:border-box; }
.sg-demo button, .sg-demo summary { -webkit-tap-highlight-color:transparent; cursor:pointer; font:inherit; }
.sg-demo button { color:inherit; }
.sg-demo button:focus-visible, .sg-demo [tabindex]:focus-visible, .sg-demo summary:focus-visible { outline:2px solid var(--demo-accent,#b6b8ff); outline-offset:5px; }
.sg-demo button:disabled { cursor:wait; }
.sg-demo strong { font-weight:650; letter-spacing:-.055em; line-height:.98; }
.sg-demo small { font-size:10px; font-weight:400; letter-spacing:.05em; }
.sg-demo-large { height:440px; }
.sg-demo-large .sg-center-type strong, .sg-demo-large .sg-gradient-type, .sg-demo-large .sg-retro-type { font-size:clamp(64px,14cqw,130px); }
.sg-demo-large .sg-type-button { transform:scale(1.25); }
.sg-demo-large .sg-orbit { transform:scale(1.5); }
.sg-demo-large .sg-globe { transform:scale(1.35); }
.sg-demo-large .sg-scrollbox { height:360px; }
.sg-demo .sg-sr { clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; width:1px; }
.sg-demo .sg-mini-label { border:1px solid #ffffff40; border-radius:20px; display:inline-flex; font-size:8px; font-weight:550; letter-spacing:.1em; line-height:1.6; padding:4px 9px; width:fit-content; }
.sg-demo .sg-canvas-note { bottom:17px; color:inherit; font-size:8px; letter-spacing:.13em; opacity:.75; position:absolute; text-align:center; width:100%; z-index:3; }
.sg-demo .sg-action-status { bottom:32px; font-size:11px; position:absolute; text-align:center; width:100%; }
.sg-demo .sg-mini-button { background:#ffffff14; border:1px solid #ffffff35; border-radius:20px; font-size:10px; min-height:36px; padding:8px 14px; }
.sg-demo [hidden] { display:none !important; }
.sg-demo *, .sg-demo *::before, .sg-demo *::after { animation-play-state:paused !important; }
.sg-demo[data-in-view="true"] *, .sg-demo[data-in-view="true"] *::before, .sg-demo[data-in-view="true"] *::after { animation-play-state:running !important; }
:root[data-preview-motion="paused"] .sg-demo *, :root[data-preview-motion="paused"] .sg-demo *::before, :root[data-preview-motion="paused"] .sg-demo *::after { animation-play-state:paused !important; transition:none !important; }
@media(prefers-reduced-motion:reduce) { :root:not([data-preview-motion="running"]) .sg-demo *, :root:not([data-preview-motion="running"]) .sg-demo *::before, :root:not([data-preview-motion="running"]) .sg-demo *::after { animation-play-state:paused !important; transition:none !important; scroll-behavior:auto !important; } }
@keyframes sg-turn { to { transform:rotate(360deg); } }
@keyframes sg-drift { 50% { transform:translate(12%,-10%) rotate(16deg) scale(1.18); } }
@keyframes sg-shift { 50% { background-position:100% 50%; } }
@keyframes sg-rise { from { opacity:0; transform:translateY(.8em) rotate(8deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes sg-breathe { 50% { opacity:.5; transform:scale(.97); } }
@keyframes sg-glint { 0%,30% { transform:translateX(-180%) rotate(25deg); } 70%,100% { transform:translateX(380%) rotate(25deg); } }
@keyframes sg-marquee { to { transform:translateX(-50%); } }
@keyframes sg-path { to { stroke-dashoffset:-500; } }
@keyframes sg-ripple { to { opacity:0; transform:translate(-50%,-50%) scale(8); } }

/* Ambient color and surfaces */
.sg-demo[data-demo="aurora"], .sg-demo[data-demo="launch-section"] { background:#080d20; }
.sg-aurora-light { animation:sg-drift 12s ease-in-out infinite alternate; background:repeating-linear-gradient(102deg,transparent 0 8%,#589dd272 12%,#a596eeaa 17%,#7ce4ab66 22%,transparent 29% 35%),radial-gradient(ellipse at 50% 85%,#336882 0,transparent 62%); filter:blur(20px); height:140%; left:-15%; opacity:.92; position:absolute; top:-35%; transform:rotate(-15deg); width:130%; }
.sg-center-type { align-items:center; display:flex; flex-direction:column; gap:17px; position:relative; text-align:center; }
.sg-center-type strong { font-size:clamp(45px,15cqw,67px); font-weight:520; }
.sg-center-type>span:last-child { color:#d0dee9; font-size:10px; letter-spacing:.2em; }
.sg-demo[data-demo="mesh"] { background:#dec4cb; color:#562230; }
.sg-blobs { background:#f9ab91; inset:-15%; overflow:hidden; position:absolute; }
.sg-blobs i { animation:sg-drift 14s ease-in-out infinite alternate; border-radius:50%; filter:blur(28px); height:80%; left:-12%; position:absolute; top:30%; width:90%; background:#dd44a6; }
.sg-blobs i:nth-child(2) { animation-delay:-6s; animation-duration:19s; background:#ffdc79; left:50%; top:-30%; }
.sg-blobs i:nth-child(3) { animation-delay:-10s; background:#6c5dcb; left:37%; top:35%; }
.sg-mesh-caption { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:25px; position:relative; width:100%; }
.sg-mesh-caption span { font-size:9px; font-weight:550; letter-spacing:.08em; }
.sg-mesh-caption strong { font-family:Georgia,serif; font-size:clamp(42px,14cqw,65px); font-weight:400; letter-spacing:-.06em; }
.sg-demo[data-demo="liquid"] { background:#a3866c; }
.sg-metal { animation:sg-drift 13s ease-in-out infinite; background:repeating-radial-gradient(ellipse at 20% 60%,#ede6d9 0%,#494139 8%,#efcbab 10%,#e8e0d3 15%,#8a6850 17%,#f9eede 22%,#494139 30%); filter:contrast(1.25); height:170%; inset:-35%; position:absolute; transform:rotate(-18deg); width:170%; }
.sg-metal i { animation:sg-turn 30s linear infinite; background:conic-gradient(from 120deg,transparent,#17140c88,#fff5eccc,transparent,#10090099,transparent); border-radius:50%; display:block; filter:blur(18px); height:85%; margin:10%; width:80%; }
.sg-metal-word { font-size:clamp(32px,13cqw,62px); font-weight:650; letter-spacing:-.05em; mix-blend-mode:overlay; position:relative; }
.sg-demo[data-demo="waves"] { background:#081d30; }
.sg-wave-scene { inset:0; position:absolute; }
.sg-wave { animation:sg-drift calc(10s + var(--i)*3s) ease-in-out infinite alternate; background:linear-gradient(160deg,#74dbcebb,#186a8540); border:1px solid #b3ffef40; border-radius:44% 58% 20% 45%; height:90%; left:calc(-15% + var(--i)*13%); opacity:calc(.8 - var(--i)*.12); position:absolute; top:calc(25% + var(--i)*10%); transform:rotate(calc(-15deg + var(--i)*-9deg)); width:110%; }
.sg-wave-type { position:relative; text-align:center; }
.sg-wave-type>span { display:block; font-size:9px; letter-spacing:.35em; margin-bottom:12px; }
.sg-wave-type strong { font-family:Georgia,serif; font-size:clamp(45px,16cqw,78px); font-style:italic; font-weight:400; }
.sg-demo[data-demo="retro-grid"] { background:#170e29; perspective:400px; }
.sg-grid-sun { background:linear-gradient(#ffbb92,#dc559c); border-radius:50%; box-shadow:0 0 50px #e7769230; height:115px; left:calc(50% - 57px); position:absolute; top:18px; width:115px; }
.sg-retro-grid { animation:sg-gridmove 5s linear infinite; background-image:linear-gradient(#9774b788 1px,transparent 1px),linear-gradient(90deg,#9774b788 1px,transparent 1px); background-size:40px 40px; height:220%; left:-50%; position:absolute; top:35%; transform:rotateX(68deg); transform-origin:center top; width:200%; }
@keyframes sg-gridmove { to { background-position:0 40px; } }
.sg-retro-type { font-size:clamp(47px,17cqw,72px); font-style:italic; letter-spacing:-.05em; line-height:.83 !important; position:relative; text-align:center; text-shadow:2px 4px 0 #653c78; }
.sg-demo[data-demo="stars"] { background:radial-gradient(ellipse at 60% 90%,#222b68,#080c20 70%); }
.sg-star { animation:sg-breathe calc(3s + var(--i)*.13s) ease-in-out infinite alternate; background:#dbe2ff; border-radius:50%; height:var(--s); left:var(--x); opacity:.8; position:absolute; top:var(--y); width:var(--s); }
.sg-star-orbit { border:1px solid #b1b8ff30; border-radius:50%; height:170px; position:absolute; transform:rotate(-30deg); width:110%; }
.sg-space-type { position:relative; text-align:center; }
.sg-space-type small { display:block; font-size:7px; letter-spacing:.17em; margin-bottom:18px; }
.sg-space-type strong { font-family:Georgia,serif; font-size:53px; font-weight:400; }
.sg-demo[data-demo="dot-grid"] { background:#25171d; }
.sg-dot-field { background-image:radial-gradient(#dda88b88 1px,transparent 1px); background-size:12px 12px; inset:0; mask-image:radial-gradient(circle at var(--px) var(--py),#000 10%,#0003 65%); position:absolute; }
.sg-dot-object { height:145px; position:relative; width:145px; }
.sg-dot-orbit { animation:sg-turn calc(18s + var(--i)*4s) linear infinite; border:2px dotted #ffc698; border-radius:50%; height:calc(100% - var(--i)*13%); left:calc(var(--i)*6.5%); position:absolute; top:calc(var(--i)*6.5%); width:calc(100% - var(--i)*13%); }
.sg-demo[data-demo="grain"] { background:#fdaa8e; color:#4b1d39; }
.sg-demo[data-demo="grain"] .sg-blobs { filter:blur(15px); }
.sg-grain-overlay { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.48' filter='url(%23n)'/%3E%3C/svg%3E"); inset:0; mix-blend-mode:multiply; opacity:.45; position:absolute; }
.sg-grain-copy { position:relative; text-align:center; }
.sg-grain-copy small { display:block; font-size:7px; letter-spacing:.17em; margin-bottom:18px; }
.sg-grain-copy strong { font-family:Georgia,serif; font-size:60px; font-weight:400; }

/* Borders */
.sg-demo[data-demo="border-beam"] { background:radial-gradient(ellipse at center,#242238,#0c0c13 80%); }
.sg-beam-frame { border:1px solid #8a79b522; border-radius:15px; box-shadow:0 20px 45px #0005; height:155px; overflow:hidden; padding:1px; position:relative; width:74%; max-width:290px; }
.sg-beam-frame::before { animation:sg-turn 7s linear infinite; background:conic-gradient(from 0deg,transparent 0 67%,#9771fa 75%,#f6d8ab 83%,transparent 85%); content:""; height:400%; left:-50%; position:absolute; top:-150%; width:200%; }
.sg-frame-content { align-items:center; background:linear-gradient(130deg,#1c1b29,#111117); border-radius:14px; display:flex; flex-direction:column; gap:9px; height:100%; justify-content:center; position:relative; }
.sg-frame-content .sg-spark { color:#d4bcff; font-size:32px; line-height:1; margin-bottom:8px; }
.sg-frame-content>span:not(.sg-spark) { font-size:14px; }
.sg-frame-content small { color:#b1adbf; font-size:9px; }
.sg-demo[data-demo="shine-border"] { background:#f3ebe7; color:#593247; }
.sg-shine-frame { background:linear-gradient(110deg,#ffd8ab,#c18fe9,#d7c5fa,#fbc0b5,#ffd8ab); background-size:300% 300%; animation:sg-shift 7s ease-in-out infinite; border-radius:22px; box-shadow:0 16px 25px #69436918; max-width:270px; padding:3px; width:72%; }
.sg-shine-frame>div { background:#faf5f2; border-radius:19px; display:flex; flex-direction:column; gap:15px; padding:24px; position:relative; }
.sg-shine-frame .sg-mini-label { border:0; font-size:7px; padding:0; }
.sg-shine-frame strong { font-size:34px; font-weight:500; }
.sg-shine-frame>div>span:last-child { bottom:20px; color:#aa72bc; font-size:38px; position:absolute; right:17px; }
.sg-demo[data-demo="prism-border"] { background:#111218; }
.sg-prism-frame { animation:sg-shift 8s linear infinite; background:linear-gradient(120deg,#ffab7c,#e489e7,#7e83ff,#96e6f5,#ffab7c); background-size:300% 300%; border-radius:18px; box-shadow:-14px 10px 45px #d277ad23,16px -14px 50px #6278e825; padding:2px; width:73%; max-width:270px; }
.sg-prism-frame>div { align-items:center; background:#12121a; border-radius:16px; display:flex; flex-direction:column; gap:12px; padding:23px 10px; }
.sg-prism-frame>div>span { font-size:43px; line-height:1; }
.sg-prism-frame strong { font-size:24px; }
.sg-prism-frame small { color:#bcbbcc; font-size:9px; }
.sg-demo[data-demo="glow-border"] { background:radial-gradient(ellipse,#183d38,#081a1c 75%); }
.sg-neon-frame { align-items:center; animation:sg-neon 6s ease-in-out infinite; border:1px solid #87fdd1; border-radius:17px; box-shadow:0 0 7px #77e2d199,0 0 24px #56c4b43b,inset 0 0 15px #4bc19a26; display:flex; flex-direction:column; gap:14px; max-width:270px; padding:20px 15px; width:70%; }
.sg-neon-star { color:#c5ffdf; font-size:42px; line-height:1; }
.sg-neon-frame strong { font-size:28px; }
.sg-neon-frame small { color:#a7d9c7; font-size:9px; }
@keyframes sg-neon { 50% { box-shadow:0 0 12px #77e2d1bb,0 0 40px #56c4b454,inset 0 0 24px #4bc19a33; } }
.sg-demo[data-demo="glass-border"] { background:#4a689f; }
.sg-demo[data-demo="glass-border"] .sg-blobs { background:#5e75af; }
.sg-demo[data-demo="glass-border"] .sg-blobs i:first-child { background:#548bb4; }
.sg-glass-outline { backdrop-filter:blur(15px); background:linear-gradient(120deg,#ffffff24,#ffffff08); border:1px solid #fff6; border-bottom-color:#ffffff20; border-radius:16px; box-shadow:inset 0 0 0 5px #ffffff0b,0 20px 50px #17254930; display:flex; flex-direction:column; gap:16px; max-width:280px; padding:21px; position:relative; width:72%; }
.sg-glass-outline>span { font-size:22px; }
.sg-glass-outline strong { font-size:29px; }
.sg-glass-outline small { font-size:7px; }
.sg-demo[data-demo="electric-border"] { background:radial-gradient(ellipse,#182c3b,#06111f 75%); }
.sg-electric { align-items:center; display:flex; flex-direction:column; gap:13px; height:165px; justify-content:center; max-width:280px; position:relative; width:78%; }
.sg-electric svg { animation:sg-electric 3s steps(3,end) infinite; filter:drop-shadow(0 0 4px #83d4ff); height:100%; inset:0; overflow:visible; position:absolute; width:100%; }
.sg-electric path { fill:none; stroke:#b5e5ff; stroke-width:1.4; }
.sg-electric>span { color:#ceecff; font-size:26px; }
.sg-electric strong { font-size:29px; text-align:center; }
@keyframes sg-electric { 20% { opacity:.65; transform:scale(1.005); } 25%,70% { opacity:1; transform:scale(.992); } }

/* Typography */
.sg-demo[data-demo="gradient-text"] { background:#10111b; }
.sg-type-composition { align-items:center; display:flex; flex-direction:column; gap:20px; text-align:center; }
.sg-gradient-type { animation:sg-shift 7s ease-in-out infinite; background:linear-gradient(110deg,#c6a9ff,#8fafff,#fac1dc,#c6a9ff); background-size:250% 100%; background-clip:text; color:transparent; display:block; font-size:clamp(54px,19cqw,88px); font-weight:650; letter-spacing:-.07em; line-height:.88 !important; }
.sg-demo .sg-type-button { align-items:center; background:transparent; border:0; display:flex; flex-direction:column; gap:26px; padding:16px; text-align:center; }
.sg-type-button small { font-size:9px; letter-spacing:.07em; }
.sg-demo[data-demo="split-text"] { background:#f5a97e; color:#4b2521; }
.sg-split-word { display:flex; font-family:Georgia,serif; font-size:clamp(48px,18cqw,84px); font-weight:400; letter-spacing:-.06em; line-height:1; }
.sg-split-word span { display:inline-block; }
.sg-demo.sg-replay .sg-split-word span { animation:sg-rise .7s both; animation-delay:calc(var(--i)*.09s); }
.sg-demo[data-demo="scramble-text"] { background:#13271d; color:#d5fbc4; }
.sg-scramble { font-family:ui-monospace,monospace; font-size:clamp(25px,11cqw,46px); font-weight:600; letter-spacing:-.04em; }
.sg-demo[data-demo="typewriter"] { background:#e4ede3; color:#264d3c; }
.sg-demo[data-demo="typewriter"] .sg-type-button { align-items:flex-start; gap:21px; text-align:left; }
.sg-type-line { display:block; font-size:clamp(30px,12cqw,52px); font-weight:520; letter-spacing:-.045em; line-height:1.04; min-height:2.1em; position:relative; }
.sg-type-line i { animation:sg-breathe 1s steps(2,end) infinite; background:#377054; display:inline-block; height:.8em; margin-left:4px; width:2px; }
.sg-demo[data-demo="outline-text"] { background:#101e1d; }
.sg-outline-type { -webkit-text-stroke:1px #93cab699; color:transparent; font-size:clamp(67px,26cqw,112px); font-weight:700; letter-spacing:-.08em; position:relative; }
.sg-outline-type span { -webkit-text-stroke:0; background:radial-gradient(circle at var(--px) var(--py),#d5ffb8,#6ce4c1 45%,transparent 75%); background-clip:text; color:transparent; inset:0; position:absolute; }
.sg-demo[data-demo="rotate-text"] { background:#fde5c5; color:#543c42; }
.sg-rotate-button>span { font-size:42px; font-weight:500; letter-spacing:-.05em; line-height:1; }
.sg-demo .sg-rotate-button { gap:9px; }
.sg-rotating-word { background:#e99f7e; border-radius:6px; min-width:6.2em; padding:7px 15px 12px; }
.sg-rotate-button small { margin-top:15px; }
.sg-rotate-button.sg-word-change .sg-rotating-word { animation:sg-rise .4s both; }

/* Cards */
.sg-demo[data-demo="spotlight-card"] { background:#101b2a; }
.sg-spotlight-card { background:radial-gradient(circle at var(--px) var(--py),#34588499,transparent 65%),radial-gradient(#819bc83b .7px,transparent .7px),#13243b; background-size:auto,8px 8px,auto; border:1px solid #b6d6ff33; border-radius:14px; box-shadow:0 15px 25px #0002; display:flex; flex-direction:column; gap:13px; max-width:290px; padding:20px; position:relative; width:77%; }
.sg-spotlight-card .sg-mini-label { border:0; font-size:7px; padding:0; }
.sg-spotlight-card .sg-symbol { color:#b8d6fc; font-size:43px; line-height:1; position:absolute; right:15px; top:17px; }
.sg-spotlight-card strong { font-size:32px; margin-top:18px; }
.sg-spotlight-card>span:last-child { color:#bfcee7; font-size:8px; }
.sg-demo[data-demo="glass-card"] { background:#78579d; }
.sg-demo[data-demo="glass-card"] .sg-blobs { background:#656fbb; }
.sg-demo[data-demo="glass-card"] .sg-blobs i:first-child { background:#754097; }
.sg-demo[data-demo="glass-card"] .sg-blobs i:nth-child(2) { background:#a4e1fa; }
.sg-glass { backdrop-filter:blur(16px); background:linear-gradient(130deg,#ffffff36,#ffffff05); border:1px solid #fff5; border-bottom-color:#ffffff1a; border-radius:18px; box-shadow:0 22px 40px #25174535; max-width:280px; padding:21px; position:relative; transform:rotate(-6deg); width:70%; }
.sg-glass>div { align-items:center; display:flex; font-size:7px; justify-content:space-between; letter-spacing:.08em; }
.sg-glass>div:first-child>span:first-child { font-size:21px; }
.sg-glass strong { display:block; font-size:39px; font-weight:480; margin:15px 0 20px; }
.sg-demo[data-demo="tilt-card"] { background:#e8e9f4; color:#3e385d; perspective:900px; }
.sg-tilt-scene { perspective:900px; width:70%; max-width:280px; }
.sg-tilt-card { background:linear-gradient(140deg,#f4f3fc,#d6d4ec); border:1px solid #fff; border-radius:14px; box-shadow:0 20px 30px #44406122; padding:19px; position:relative; transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .18s ease; }
.sg-tilt-card .sg-mini-label { border:0; font-size:7px; padding:0; }
.sg-tilt-card strong { display:block; font-size:30px; margin-top:69px; position:relative; transform:translateZ(25px); }
.sg-tilt-card>span:last-child { display:block; font-size:6px; margin-top:13px; }
.sg-artwork { height:85px; position:absolute; right:15px; top:28px; transform:translateZ(30px); width:100px; }
.sg-artwork i { background:linear-gradient(120deg,#dddcfa,#7377b3); border:1px solid #fff8; border-radius:50%; box-shadow:4px 5px 15px #5c598128; height:68px; left:10px; position:absolute; top:0; transform:rotate(-25deg); width:35px; }
.sg-artwork i:nth-child(2) { left:32px; top:13px; transform:rotate(30deg); }
.sg-artwork i:nth-child(3) { left:53px; top:1px; transform:rotate(70deg); }
.sg-demo[data-demo="stack-card"] { background:#392832; color:#502c39; }
.sg-stack { height:156px; max-width:265px; position:relative; transform:translateY(-15px); width:70%; }
.sg-stack-sheet { background:#f0c7bd; border:1px solid #fff6; border-radius:12px; display:flex; flex-direction:column; gap:18px; height:100%; inset:0; padding:20px; position:absolute; transform:translate(calc(var(--i)*6px),calc(var(--i)*-7px)) rotate(calc(var(--i)*5deg)); transition:transform .45s,opacity .3s; z-index:calc(3 - var(--i)); }
.sg-stack-sheet:nth-child(2) { background:#e1bbcf; }
.sg-stack-sheet:nth-child(3) { background:#e8d9b2; }
.sg-stack-sheet>span:first-child { font-size:7px; letter-spacing:.09em; }
.sg-stack-sheet strong { font-size:31px; max-width:170px; }
.sg-stack-sheet>span:last-child { bottom:10px; font-size:45px; line-height:1; position:absolute; right:15px; }
.sg-demo .sg-stack-next { bottom:14px; color:#efdbdf; position:absolute; }
.sg-demo[data-demo="flip-card"] { background:#b8d0c0; color:#274f42; perspective:800px; }
.sg-demo .sg-flip-button { background:transparent; border:0; height:185px; max-width:280px; padding:0; perspective:800px; width:72%; }
.sg-flip-inner { display:block; height:100%; position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1); width:100%; }
.sg-flip-button[aria-pressed="true"] .sg-flip-inner { transform:rotateY(180deg); }
.sg-flip-front, .sg-flip-back { backface-visibility:hidden; background:#f2f0d9; border:1px solid #fff9; border-radius:7px; box-shadow:0 13px 30px #2d5e3925; display:flex; flex-direction:column; gap:13px; height:100%; inset:0; padding:20px; position:absolute; text-align:left; }
.sg-flip-front strong { font-family:Georgia,serif; font-size:34px; font-weight:400; position:relative; }
.sg-flip-front small, .sg-flip-back small { font-size:7px; }
.sg-flip-art { color:#80a48c; font-size:100px; position:absolute; right:5px; top:20px; }
.sg-flip-back { background:#325f4c; color:#eff1d9; justify-content:space-between; transform:rotateY(180deg); }
.sg-flip-back strong { font-size:26px; }
.sg-flip-back>span { font-size:9px; }
.sg-demo[data-demo="expand-card"] { background:#efc99f; color:#533326; }
.sg-expand-widget { background:#fcf3e8; border:1px solid #fff8; border-radius:13px; box-shadow:0 10px 30px #8f593925; max-width:290px; padding:18px; width:83%; }
.sg-expand-widget summary { align-items:center; display:flex; gap:12px; list-style:none; min-height:64px; }
.sg-expand-widget summary::-webkit-details-marker { display:none; }
.sg-expand-art { align-items:center; background:#e5b281; border-radius:8px; color:#6c482f; display:flex; flex-shrink:0; font-size:36px; height:56px; justify-content:center; width:56px; }
.sg-expand-widget small { display:block; font-size:6px; margin-bottom:8px; }
.sg-expand-widget strong { display:block; font-size:21px; letter-spacing:-.04em; }
.sg-expand-icon { font-size:23px; margin-left:auto; transition:transform .3s; }
.sg-expand-widget[open] .sg-expand-icon { transform:rotate(45deg); }
.sg-expand-widget p { font-size:10px; line-height:1.75; margin:14px 0; }
.sg-expand-foot { display:block; font-size:7px; }

/* Buttons and pointer studies */
.sg-demo[data-demo="magnetic"] { background:#d8f2a2; color:#253b28; background-image:radial-gradient(#2c4c261f 1px,transparent 1px); background-size:16px 16px; }
.sg-demo .sg-magnetic { align-items:center; background:#223828; border:1px solid #304a2f; border-radius:50px; box-shadow:0 13px 27px #35582725; color:#e5f7cc; display:flex; font-size:16px; font-weight:500; gap:26px; min-height:65px; padding:18px 26px; position:relative; transform:translate(var(--mx,0px),var(--my,0px)); transition:transform .22s ease; }
.sg-magnetic>span:last-child { font-size:26px; }
.sg-demo[data-demo="ripple-button"] { background:#d2e6f7; color:#294f6c; }
.sg-demo .sg-ripple-button { align-items:center; background:#2f6486; border:1px solid #376f90; border-radius:12px; box-shadow:0 15px 30px #39668b30; color:#f0f7fb; display:flex; font-size:15px; gap:23px; min-height:61px; overflow:hidden; padding:15px 24px; position:relative; }
.sg-ripple-button>span { position:relative; z-index:1; }
.sg-ripple-circle { animation:sg-ripple .65s ease-out both; background:#d9f2ff77; border-radius:50%; height:40px; pointer-events:none; position:absolute; transform:translate(-50%,-50%) scale(0); width:40px; }
.sg-demo[data-demo="shimmer-button"] { background:radial-gradient(ellipse,#312442,#15121e 75%); }
.sg-demo .sg-shimmer-button { align-items:center; background:linear-gradient(120deg,#332a40,#1e1928); border:1px solid #b49cca88; border-radius:40px; box-shadow:inset 0 1px #eadcff66,0 6px 30px #baa0ff1c; display:flex; font-size:14px; gap:18px; min-height:60px; overflow:hidden; padding:18px 25px; position:relative; }
.sg-shimmer-button::before { animation:sg-glint 5s ease-in-out infinite; background:linear-gradient(90deg,transparent,#e1bcff40,transparent); content:""; height:180%; left:0; position:absolute; top:-40%; width:45%; }
.sg-shimmer-button>span { position:relative; }
.sg-demo[data-demo="send-button"] { background:#dcf0e6; color:#265342; }
.sg-demo .sg-send-button { align-items:center; background:#285b47; border:1px solid #38705a; border-radius:11px; box-shadow:0 14px 30px #39775328; color:#e1faeb; display:flex; font-size:15px; gap:14px; min-height:60px; padding:18px 25px; transition:background .3s; }
.sg-send-icon { font-size:22px; }
.sg-send-button[data-state="done"] { background:#143d30; }
.sg-send-button[data-state="pending"] .sg-send-icon { animation:sg-turn 1s linear infinite; }
.sg-demo[data-demo="trail"] { background:#352329; }
.sg-trail-dot { background:#f3ba88; border-radius:50%; filter:blur(calc(var(--i)*.5px)); height:calc(50px - var(--i)*7px); left:calc(var(--px) - var(--i)*15px); opacity:calc(.8 - var(--i)*.12); position:absolute; top:calc(var(--py) + var(--i)*10px); transform:translate(-50%,-50%); transition:left calc(.08s + var(--i)*.05s) ease-out,top calc(.08s + var(--i)*.05s) ease-out; width:calc(50px - var(--i)*7px); }
.sg-trail-copy { pointer-events:none; position:relative; text-align:center; }
.sg-trail-copy>span { display:block; font-size:8px; letter-spacing:.25em; margin-bottom:15px; }
.sg-trail-copy strong { font-family:Georgia,serif; font-size:49px; font-style:italic; font-weight:400; }
.sg-demo[data-demo="lens"] { background:#e2d5e4; color:#4d395f; }
.sg-lens-art { inset:0; overflow:hidden; position:absolute; }
.sg-lens-art i { background:linear-gradient(120deg,#a297ca,#e2b7b9); border-radius:45%; height:200px; left:-12%; position:absolute; top:20%; transform:rotate(35deg); width:50%; }
.sg-lens-art i:nth-child(2) { background:linear-gradient(120deg,#c4d4df,#778daf); left:30%; top:-18%; transform:rotate(-20deg); width:38%; }
.sg-lens-art i:nth-child(3) { background:linear-gradient(110deg,#d0acb9,#ad80a9); left:65%; top:18%; }
.sg-lens { backdrop-filter:contrast(1.6) saturate(1.5); background:#ffffff12; border:1px solid #fff9; border-radius:50%; box-shadow:inset 5px 5px 12px #ffffff52,8px 12px 25px #4332681f; height:115px; left:var(--px); position:absolute; top:var(--py); transform:translate(-50%,-50%); width:115px; z-index:2; }
.sg-lens-copy { position:relative; text-align:center; }
.sg-lens-copy small { display:block; font-size:8px; letter-spacing:.15em; margin-bottom:17px; }
.sg-lens-copy strong { font-family:Georgia,serif; font-size:63px; font-weight:400; }
.sg-demo[data-demo="spotlight"] { background:#0e211c; }
.sg-spotlight-grid { background-image:linear-gradient(#7da69026 1px,transparent 1px),linear-gradient(90deg,#7da69026 1px,transparent 1px); background-size:28px 28px; inset:0; mask-image:radial-gradient(circle at var(--px) var(--py),#000,transparent 70%); position:absolute; }
.sg-spotlight-copy { text-align:center; z-index:1; }
.sg-spotlight-copy>span { display:block; font-size:9px; letter-spacing:.25em; margin-bottom:12px; }
.sg-spotlight-copy strong { font-family:Georgia,serif; font-size:75px; font-weight:400; }
.sg-cursor-light { background:#d5ff9540; border-radius:50%; filter:blur(30px); height:120px; left:var(--px); position:absolute; top:var(--py); transform:translate(-50%,-50%); width:120px; }
.sg-demo[data-demo="reveal-pointer"] { background:#3f2744; }
.sg-mask-front, .sg-mask-back { align-items:center; display:flex; flex-direction:column; gap:17px; inset:0; justify-content:center; position:absolute; }
.sg-mask-back { background:#d4eca7; color:#354d35; }
.sg-mask-front { background:#422a48; clip-path:circle(70px at var(--px) var(--py)); color:#eac8e9; }
.sg-mask-front strong, .sg-mask-back strong { font-size:53px; }
.sg-mask-front small, .sg-mask-back small { font-size:7px; letter-spacing:.16em; }
.sg-demo[data-demo="reveal-pointer"] .sg-canvas-note { color:#31432f; }

/* Small navigation systems */
.sg-demo[data-demo="dock"] { background:#d7b48e; color:#492f37; }
.sg-dock-wallpaper { background:radial-gradient(ellipse at 20% 90%,#bb7d80,transparent 70%),radial-gradient(ellipse at 75% 30%,#e8c997,transparent 75%),#b29bbb; inset:0; position:absolute; }
.sg-dock { align-items:end; backdrop-filter:blur(15px); background:#ffffff38; border:1px solid #ffffff65; border-radius:18px; box-shadow:0 12px 25px #3c283e25; display:flex; gap:8px; height:74px; padding:10px; position:relative; }
.sg-demo .sg-dock button { align-items:center; background:linear-gradient(145deg,hsl(calc(10 + var(--i)*37),45%,82%),hsl(calc(8 + var(--i)*37),28%,58%)); border:1px solid #fff5; border-radius:10px; box-shadow:0 3px 5px #54393419; color:#402c31; display:flex; font-size:27px; height:45px; justify-content:center; padding:0; transform-origin:center bottom; transition:transform .2s; width:45px; }
.sg-dock button:hover, .sg-dock button:focus-visible { transform:translateY(-6px) scale(1.18); }
.sg-dock button:has(+button:hover), .sg-dock button:hover+button { transform:translateY(-2px) scale(1.06); }
.sg-dock-selection { bottom:45px; font-size:10px; position:absolute; }
.sg-demo[data-demo="tabs"] { background:#e3e7f2; color:#394365; }
.sg-tabs-widget { background:#fbfcff; border:1px solid #fff; border-radius:14px; box-shadow:0 12px 28px #3c4d7020; max-width:300px; padding:14px; width:84%; }
.sg-tabs-buttons { background:#e9edf6; border-radius:9px; display:flex; gap:3px; padding:4px; }
.sg-demo .sg-tabs-buttons button { background:transparent; border:0; border-radius:6px; color:#576384; flex:1; font-size:10px; min-height:36px; padding:7px 5px; transition:background .25s,box-shadow .25s; }
.sg-demo .sg-tabs-buttons button[aria-pressed="true"] { background:#fff; box-shadow:0 2px 5px #43537616; color:#293954; }
.sg-tab-panel { align-items:center; display:flex; flex-direction:column; gap:12px; min-height:125px; padding:16px 4px 8px; text-align:center; }
.sg-tab-symbol { color:#7588b6; font-size:30px; line-height:1; }
.sg-tab-panel strong { font-size:20px; letter-spacing:-.03em; }
.sg-tab-panel>span:last-child { font-size:8px; }
.sg-demo[data-demo="accordion"] { background:#2a3045; }
.sg-accordion { max-width:300px; width:82%; }
.sg-accordion>span { color:#c6cde5; display:block; font-size:7px; letter-spacing:.13em; margin-bottom:14px; }
.sg-accordion details { border-bottom:1px solid #a3b1df35; }
.sg-accordion summary { align-items:center; display:flex; font-size:11px; justify-content:space-between; list-style:none; min-height:42px; }
.sg-accordion summary::-webkit-details-marker { display:none; }
.sg-accordion summary>span { font-size:20px; transition:transform .2s; }
.sg-accordion details[open] summary>span { transform:rotate(45deg); }
.sg-accordion p { color:#c1cae0; font-size:10px; line-height:1.7; padding-bottom:15px; }
.sg-demo[data-demo="menu"] { background:#d8c5e8; color:#53365d; }
.sg-menu-widget { background:#f7f0fa; border:1px solid #fff8; border-radius:12px; box-shadow:0 12px 28px #61356a20; max-width:310px; padding:16px 20px; width:85%; }
.sg-menu-widget>div:first-child { align-items:center; display:flex; justify-content:space-between; }
.sg-menu-widget>div:first-child>span { font-size:18px; font-weight:650; letter-spacing:-.07em; }
.sg-demo .sg-menu-widget button { background:none; border:0; color:inherit; font-size:10px; min-height:36px; padding:5px; }
.sg-menu-items { border-top:1px solid #d9c3e3; display:flex; flex-direction:column; margin-top:9px; padding-top:8px; }
.sg-demo .sg-menu-items button { animation:sg-rise .3s both; display:flex; font-size:18px; font-weight:500; justify-content:space-between; letter-spacing:-.05em; }
.sg-menu-caption { color:#755780; font-size:10px; margin:14px 0 4px; }

/* Contained scroll: every demo names and exposes its own scroll area. */
.sg-scrollbox { height:220px; overflow:auto; overscroll-behavior:contain; position:relative; scrollbar-color:#c4a5d6 #ffffff14; scrollbar-width:thin; width:100%; }
.sg-demo[data-demo="parallax"] { background:#dad8eb; color:#fbf8ed; padding:14px; }
.sg-parallax-box { background:#b8b9d5; border-radius:9px; }
.sg-parallax-track { height:600px; position:relative; }
.sg-parallax-stage { height:220px; overflow:hidden; position:sticky; top:0; }
.sg-mountain { border-radius:40% 55% 0 0; height:240px; left:-20%; position:absolute; top:75%; transform:translateY(calc(var(--scroll,0)*-50px)) rotate(-15deg); width:120%; }
.sg-mountain-back { background:linear-gradient(140deg,#818aac,#5f699a); }
.sg-mountain-front { background:linear-gradient(145deg,#4c597f,#303f68); left:15%; top:85%; transform:translateY(calc(var(--scroll,0)*-110px)) rotate(20deg); }
.sg-parallax-title { display:block; font-family:Georgia,serif; font-size:48px; left:20px; letter-spacing:-.04em; line-height:1; position:absolute; top:28px; transform:translateY(calc(var(--scroll,0)*-20px)); }
html[data-preview-motion="paused"] .sg-parallax-stage { --scroll:0; }
@media(prefers-reduced-motion:reduce) { html:not([data-preview-motion="running"]) .sg-parallax-stage { --scroll:0; } }
.sg-scroll-hint { bottom:12px; font-size:8px; position:absolute; text-align:center; width:100%; }
.sg-scroll-ending { bottom:22px; font-size:12px; position:absolute; text-align:center; width:100%; }
.sg-demo[data-demo="scroll-progress"] { background:#f0dce5; color:#583646; padding:16px 20px; }
.sg-reading-widget { background:#fff5f4; border:1px solid #fff; border-radius:10px; height:100%; max-width:360px; overflow:hidden; padding:12px 14px; width:100%; }
.sg-reading-header { display:flex; font-size:7px; justify-content:space-between; letter-spacing:.06em; padding-bottom:10px; }
.sg-reading-bar { background:#ecdee2; border-radius:4px; height:3px; overflow:hidden; }
.sg-reading-bar i { background:#b27293; display:block; height:100%; width:calc(var(--scroll,0)*100%); }
.sg-reading-box { height:calc(100% - 32px) !important; margin-top:10px; padding-right:8px; }
.sg-reading-box>strong { display:block; font-family:Georgia,serif; font-size:30px; font-weight:400; margin:14px 0 25px; }
.sg-reading-box p { font-size:11px; line-height:1.9; margin:22px 0; }
.sg-reading-box p b { display:block; font-size:10px; margin-bottom:8px; }
.sg-demo[data-demo="reveal-scroll"] { background:#d3deef; padding:14px; }
.sg-reveal-box { border-radius:9px; scroll-snap-type:y proximity; }
.sg-reveal-scene { background:hsl(calc(220 + var(--i)*25),30%,calc(48% - var(--i)*6%)); display:flex; flex-direction:column; gap:17px; height:100%; min-height:220px; padding:22px; position:relative; scroll-snap-align:start; }
.sg-reveal-scene strong { font-size:39px; position:relative; z-index:1; }
.sg-reveal-scene small { font-size:7px; letter-spacing:.08em; }
.sg-reveal-scene small:last-child { margin-top:auto; }
.sg-reveal-scene>span { color:#dbd7ed88; font-size:135px; line-height:1; position:absolute; right:12px; top:30px; }
.sg-demo[data-demo="horizontal-scroll"] { background:#e1e4bd; color:#39412e; }
.sg-horizontal-widget { max-width:360px; padding:17px 20px; width:100%; }
.sg-horizontal-track { display:flex; gap:13px; height:160px; overflow:auto; overscroll-behavior:contain; padding-bottom:5px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.sg-horizontal-card { background:hsl(calc(76 + var(--i)*40),25%,calc(77% - var(--i)*10%)); border:1px solid #ffffff60; border-radius:10px; display:flex; flex:0 0 86%; flex-direction:column; gap:10px; justify-content:space-between; padding:17px; position:relative; scroll-snap-align:start; }
.sg-horizontal-card small { font-size:7px; }
.sg-horizontal-card>span { font-size:85px; line-height:1; position:absolute; right:16px; top:18px; }
.sg-horizontal-card strong { font-size:37px; position:relative; }
.sg-horizontal-controls { align-items:center; display:flex; font-size:8px; justify-content:space-between; margin-top:8px; }
.sg-demo .sg-horizontal-controls button { background:#ffffff60; border:1px solid #53633244; border-radius:50%; height:34px; padding:0; width:34px; }

/* Numbers, relationships, and paths */
.sg-demo[data-demo="orbit"] { background:radial-gradient(ellipse,#203929,#10251c 80%); }
.sg-orbit { align-items:center; display:flex; height:180px; justify-content:center; position:relative; width:180px; }
.sg-orbit-core { align-items:center; background:linear-gradient(140deg,#d4f59c,#839f64); border:1px solid #f3ffd2; border-radius:17px; box-shadow:0 0 35px #c2f08518; color:#29452c; display:flex; font-size:38px; height:63px; justify-content:center; width:63px; }
.sg-orbit-path { animation:sg-turn calc(16s + var(--i)*9s) linear infinite; border:1px solid #d0efbe33; border-radius:50%; height:calc(106px + var(--i)*38px); left:calc(37px - var(--i)*19px); position:absolute; top:calc(37px - var(--i)*19px); width:calc(106px + var(--i)*38px); }
.sg-orbit-path:nth-child(3) { animation-direction:reverse; }
.sg-orbit-path>span { align-items:center; background:#254531; border:1px solid #b4dba867; border-radius:50%; color:#e2f2c8; display:flex; font-size:16px; height:29px; justify-content:center; left:50%; position:absolute; top:-14px; width:29px; }
.sg-demo[data-demo="number"] { background:#213b2d; color:#e0f4d9; }
.sg-number-widget { max-width:290px; width:77%; }
.sg-number-widget .sg-mini-label { border:0; font-size:7px; padding:0; }
.sg-number-widget>div:nth-child(2) { align-items:baseline; display:flex; gap:16px; margin:16px 0; }
.sg-counter { font-size:52px; font-variant-numeric:tabular-nums; }
.sg-counter-growth { color:#b9e69b; font-size:10px; }
.sg-bars { align-items:end; display:flex; gap:5px; height:65px; margin-bottom:10px; }
.sg-bars i { background:linear-gradient(#c1e4a2,#607f59); border-radius:3px 3px 0 0; flex:1; height:var(--h); transform-origin:bottom; }
.sg-demo.sg-replay .sg-bars i { animation:sg-grow .9s both; animation-delay:calc(var(--i)*.025s); }
@keyframes sg-grow { from { transform:scaleY(.15); } to { transform:scaleY(1); } }
.sg-demo .sg-number-widget .sg-mini-button { border:0; font-size:8px; min-height:30px; padding:4px 0; background:transparent; }
.sg-demo[data-demo="globe"] { background:radial-gradient(ellipse,#123c3f,#0d1e2a 80%); }
.sg-globe { border:1px solid #72bec38c; border-radius:50%; box-shadow:inset 10px 0 30px #7edddb18,0 0 40px #59d0df12; height:155px; margin-top:-28px; overflow:hidden; perspective:300px; position:relative; transform-style:preserve-3d; width:155px; }
.sg-meridian { animation:sg-meridian 18s linear infinite; animation-delay:calc(var(--i)*-2.5s); border:1px solid #7de3df70; border-radius:50%; height:100%; inset:0; position:absolute; transform:rotateY(calc(var(--i)*25deg)); width:100%; }
@keyframes sg-meridian { from { transform:rotateY(0deg); } to { transform:rotateY(180deg); } }
.sg-latitude { border:1px solid #7de3df60; border-radius:50%; height:32%; left:0; position:absolute; top:calc(1% + var(--i)*17%); width:100%; }
.sg-globe-dot { background:#defbca; border-radius:50%; box-shadow:0 0 10px #d9ffa2; height:5px; left:35%; position:absolute; top:32%; width:5px; }
.sg-globe-copy { bottom:21px; position:absolute; text-align:center; }
.sg-globe-copy small { display:block; font-size:7px; letter-spacing:.15em; margin-bottom:8px; }
.sg-globe-copy strong { font-size:20px; font-weight:450; letter-spacing:-.03em; }
.sg-demo[data-demo="beam"] { background:#111d33; }
.sg-path-network { height:190px; max-width:400px; position:relative; width:100%; }
.sg-path-network svg { height:100%; width:100%; }
.sg-path-network path { fill:none; stroke-width:1; }
.sg-path-base { stroke:#8aa6dd35; }
.sg-path-flow { animation:sg-path calc(6s + var(--i)*.3s) linear infinite; animation-delay:calc(var(--i)*-1s); stroke:#bbcaff; stroke-dasharray:18 500; }
.sg-network-node { align-items:center; background:linear-gradient(135deg,#28375a,#19263e); border:1px solid #93a9d240; border-radius:9px; color:#c4d4f7; display:flex; font-size:20px; height:34px; justify-content:center; left:var(--x); position:absolute; top:var(--y); transform:translate(-50%,-50%); width:34px; }
.sg-network-node:nth-last-child(4) { background:#bdc9f1; box-shadow:0 0 30px #a4b6ff20; color:#324262; height:49px; width:49px; }

/* Complete scenes */
.sg-launch-copy { align-items:center; display:flex; flex-direction:column; gap:12px; position:relative; text-align:center; }
.sg-launch-copy .sg-mini-label { font-size:6px; }
.sg-launch-copy strong { font-size:48px; font-weight:550; }
.sg-launch-copy>span:not(.sg-mini-label) { font-size:8px; }
.sg-demo .sg-launch-copy button { background:#f0ecff; border:0; border-radius:25px; color:#393151; font-size:9px; min-height:35px; padding:9px 16px; }
.sg-launch-copy .sg-action-status { bottom:-21px; }
.sg-demo[data-demo="studio-section"] { background:#ecf196; color:#323326; }
.sg-studio-copy { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:22px; position:relative; width:100%; z-index:1; }
.sg-studio-copy>span:first-child { font-size:7px; letter-spacing:.1em; }
.sg-studio-copy strong { font-size:clamp(42px,17cqw,66px); font-weight:700; letter-spacing:-.065em; line-height:.89; }
.sg-studio-copy strong>span { font-size:15px; vertical-align:top; }
.sg-studio-foot { align-items:center; display:flex; font-size:8px; justify-content:space-between; }
.sg-demo .sg-studio-foot button { background:#35362a; border:0; border-radius:50%; color:#eff3a5; font-size:21px; height:36px; padding:0; width:36px; }
.sg-studio-star { animation:sg-turn 40s linear infinite; color:#abb656; font-size:180px; line-height:1; position:absolute; right:-35px; top:0; }
.sg-demo[data-demo="pricing-section"] { background:radial-gradient(ellipse,#3f3658,#1b1c2c); }
.sg-pricing-widget { background:linear-gradient(135deg,#383247,#242237); border:1px solid #a99aca77; border-radius:15px; box-shadow:0 0 27px #a28cdd15; display:flex; flex-direction:column; gap:11px; max-width:280px; padding:17px 22px; width:78%; }
.sg-pricing-switch { align-self:flex-end; background:#15142355; border:1px solid #f0e3ff22; border-radius:20px; display:flex; padding:2px; }
.sg-demo .sg-pricing-switch button { background:transparent; border:0; border-radius:20px; font-size:8px; min-height:28px; padding:3px 11px; }
.sg-demo .sg-pricing-switch button[aria-pressed="true"] { background:#ded7f7; color:#3f3451; }
.sg-pricing-widget>span { color:#d3cee3; font-size:8px; }
.sg-price { align-items:baseline; display:flex; gap:8px; }
.sg-price strong { font-size:48px; }
.sg-price>span { color:#c0b8d4; font-size:9px; }
.sg-pricing-rule { border-top:1px solid #bcb0d730; margin:1px 0; }
.sg-pricing-widget>small { font-size:7px; }
.sg-demo[data-demo="bento-section"] { background:#f0dce4; color:#574052; padding:20px; }
.sg-mosaic { display:grid; gap:8px; grid-template-columns:1.1fr 1fr; grid-template-rows:1fr 1fr; height:200px; max-width:380px; width:100%; }
.sg-mosaic>div { border:1px solid #ffffff88; border-radius:10px; overflow:hidden; padding:13px; position:relative; }
.sg-mosaic-a { background:#f7eee4; grid-row:span 2; }
.sg-mosaic-b { background:#d7bfd9; }
.sg-mosaic-c { background:#a7a6c8; }
.sg-mosaic>div>span { display:block; font-size:6px; letter-spacing:.05em; margin-bottom:13px; }
.sg-mosaic strong { display:block; font-size:24px; }
.sg-mosaic-a>i { animation:sg-turn 30s linear infinite; bottom:-9px; color:#c595a7; font-size:90px; font-style:normal; line-height:1; position:absolute; right:-2px; }
.sg-mosaic-b strong { font-size:30px; }
.sg-mosaic-b>div { align-items:end; bottom:0; display:flex; gap:4px; height:40px; opacity:.3; position:absolute; right:8px; width:45%; }
.sg-tiny-bar { background:#7e4b86; flex:1; height:calc(20% + var(--i)*12%); }
.sg-mosaic-c>strong { color:#363452; font-size:22px; }
.sg-demo[data-demo="testimonial-section"] { background:#fae4d5; color:#613c37; }
.sg-testimonial { max-width:300px; padding:20px 0; width:82%; }
.sg-quote-mark { color:#c08c77; display:block; font-family:Georgia,serif; font-size:50px; height:36px; line-height:1; }
.sg-quote { font-family:Georgia,"Apple SD Gothic Neo",serif; font-size:19px; font-weight:450; letter-spacing:-.025em; line-height:1.5; margin:8px 0 20px; }
.sg-testimonial>div:nth-last-child(2) { align-items:center; display:flex; gap:9px; }
.sg-quote-avatar { align-items:center; background:#bf897b; border:1px solid #fdf0e8; border-radius:50%; color:#fff6eb; display:flex; font-family:Georgia,serif; font-size:15px; height:27px; justify-content:center; width:27px; }
.sg-quote-person { font-size:8px; }
.sg-quote-controls { align-items:center; display:flex; font-size:8px; gap:12px; justify-content:flex-end; margin-top:-30px; }
.sg-demo .sg-quote-controls button { background:transparent; border:1px solid #bb867c77; border-radius:50%; font-size:15px; height:31px; padding:0; width:31px; }
.sg-demo[data-demo="marquee-section"] { background:#ecf0e5; color:#365448; display:block; padding-top:27px; }
.sg-marquee-copy { text-align:center; }
.sg-marquee-copy small { display:block; font-size:6px; letter-spacing:.12em; margin-bottom:11px; }
.sg-marquee-copy strong { font-family:Georgia,serif; font-size:33px; font-weight:400; }
.sg-marquee-window { margin-top:27px; mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent); overflow:hidden; }
.sg-marquee-track { animation:sg-marquee 24s linear infinite; display:flex; width:max-content; }
.sg-marquee-track>div { display:flex; flex-shrink:0; gap:27px; padding-right:27px; }
.sg-marquee-track span { font-size:22px; font-weight:550; letter-spacing:-.04em; white-space:nowrap; }
.sg-marquee-reverse { margin-top:17px; }
.sg-marquee-reverse .sg-marquee-track { animation-direction:reverse; animation-duration:35s; }
.sg-marquee-reverse span { color:#628073; font-size:8px; font-weight:450; letter-spacing:.12em; }
@media(max-width:360px) { .sg-demo .sg-dock { gap:5px; padding:8px; } .sg-demo .sg-dock button { height:40px; width:40px; } .sg-rotate-button>span { font-size:34px; } .sg-quote { font-size:16px; } .sg-quote-controls { gap:6px; } }

</style>
</head>
<body>
<main aria-label="살아 있는 선">
<div class="sg-demo sg-demo-large" data-demo="electric-border" data-in-view="false" style="--demo-accent:#abe7ff" role="group" aria-label="살아 있는 선 실행 예제"><div class="sg-electric"><svg viewBox="0 0 260 154" aria-hidden="true"><path d="M9 12 25 8 43 12 64 7 89 10 109 6 131 11 150 7 178 12 200 8 231 11 250 6 253 31 248 51 254 68 249 91 252 115 248 139 229 143 206 139 183 146 161 141 137 146 113 140 91 145 63 140 40 146 12 139 8 118 12 93 6 74 11 50 7 29Z"/></svg><span>⚡</span><strong>Charged<br>with ideas.</strong></div></div>
</main>
<script>
/** Local demonstrations: native controls, bounded animation, visible-only playback. */
(() => {
  const demos = [...document.querySelectorAll('.sg-demo')];
  if (!demos.length) return;
  const preference = matchMedia('(prefers-reduced-motion: reduce)');
  const stopped = () => document.documentElement.dataset.previewMotion === 'paused' || (preference.matches && document.documentElement.dataset.previewMotion !== 'running');
  const timers = new Map();
  const finishes = new Map();
  function cancel(demo, finish = false) {
    for (const timer of timers.get(demo) || []) clearTimeout(timer);
    timers.delete(demo);
    if (finish) finishes.get(demo)?.();
    finishes.delete(demo);
  }
  function later(demo, action, delay) {
    const ids = timers.get(demo) || new Set();
    const id = setTimeout(() => { ids.delete(id); action(); }, delay);
    ids.add(id); timers.set(demo, ids);
  }
  function replay(demo) { demo.classList.remove('sg-replay'); void demo.offsetWidth; demo.classList.add('sg-replay'); }
  function setVisible(demo, visible) {
    demo.dataset.inView = String(visible && !document.hidden && !demo.closest('[hidden]'));
    if (demo.dataset.inView === 'false') cancel(demo, true);
  }
  const visible = new Set();
  const observer = 'IntersectionObserver' in window ? new IntersectionObserver(entries => {
    for (const entry of entries) {
      if (entry.isIntersecting) visible.add(entry.target); else visible.delete(entry.target);
      setVisible(entry.target, entry.isIntersecting);
    }
  }, {threshold:.08}) : null;
  for (const demo of demos) { if (observer) observer.observe(demo); else { visible.add(demo); setVisible(demo,true); } }
  document.addEventListener('visibilitychange', () => { for(const demo of demos) setVisible(demo,visible.has(demo)); });
  document.addEventListener('sg:examples-filtered', () => { for(const demo of demos) setVisible(demo,visible.has(demo)); });
  const motionObserver = new MutationObserver(() => { if(stopped()) for(const demo of demos) cancel(demo,true); });
  motionObserver.observe(document.documentElement, {attributes:true,attributeFilter:['data-preview-motion']});
  preference.addEventListener('change', () => { if(stopped()) for(const demo of demos) cancel(demo,true); });
  for(const demo of demos) {
    const setStatus = text => { const el=demo.querySelector('.sg-action-status');if(el)el.textContent=text; };
    const move = event => {
      if(stopped())return;
      const rect=demo.getBoundingClientRect(),x=(event.clientX-rect.left)/rect.width,y=(event.clientY-rect.top)/rect.height;
      demo.style.setProperty('--px',`${Math.max(0,Math.min(1,x))*100}%`);
      demo.style.setProperty('--py',`${Math.max(0,Math.min(1,y))*100}%`);
      demo.style.setProperty('--rx',`${(y-.5)*-17}deg`);
      demo.style.setProperty('--ry',`${(x-.5)*17}deg`);
      demo.style.setProperty('--mx',`${(x-.5)*28}px`);
      demo.style.setProperty('--my',`${(y-.5)*20}px`);
    };
    demo.addEventListener('pointermove',move,{passive:true});
    demo.addEventListener('pointerdown',move,{passive:true});
    demo.addEventListener('pointerleave',()=>{for(const [key,value] of Object.entries({'--px':'50%','--py':'50%','--rx':'0deg','--ry':'0deg','--mx':'0px','--my':'0px'}))demo.style.setProperty(key,value);});
    for(const region of demo.querySelectorAll('.sg-scrollbox')) {
      const scroll=()=>{
        const progress=region.scrollTop/Math.max(1,region.scrollHeight-region.clientHeight);
        demo.style.setProperty('--scroll',String(progress));
        const percent=demo.querySelector('.sg-reading-percent');if(percent)percent.textContent=Math.round(progress*100)+'%';
      };
      region.addEventListener('scroll',scroll,{passive:true});scroll();
    }
    const track=demo.querySelector('.sg-horizontal-track');
    if(track) track.addEventListener('scroll',()=>{
      const step=track.children[0].offsetWidth+13;
      const index=Math.min(2,Math.max(0,Math.round(track.scrollLeft/step)));
      demo.dataset.slide=String(index);demo.querySelector('.sg-horizontal-count').textContent=`${index+1} / 3`;
    },{passive:true});
    demo.addEventListener('click',event=>{
      const action=event.target.closest('[data-action]');if(!action||!demo.contains(action))return;
      switch(action.dataset.action) {
        case 'magnetic':setStatus('좋아요. 작은 움직임을 시작했어요.');break;
        case 'shimmer':setStatus('새로운 시작을 선택했어요.');break;
        case 'launch':setStatus('당신의 다음 아이디어를 기다립니다.');break;
        case 'studio':setStatus('좋은 디자인은 작은 디테일에서 시작됩니다.');break;
        case 'split': {
          cancel(demo,true);
          const complete=()=>demo.classList.remove('sg-replay');
          finishes.set(demo,complete);
          if(stopped()){complete();break;}
          replay(demo);later(demo,complete,1200);break;
        }
        case 'ripple': {
          setStatus('파문이 시작됐어요.');
          if(stopped())break;
          const rect=action.getBoundingClientRect(),ripple=document.createElement('i');
          ripple.className='sg-ripple-circle';ripple.setAttribute('aria-hidden','true');
          ripple.style.left=(event.detail?event.clientX-rect.left:rect.width/2)+'px';
          ripple.style.top=(event.detail?event.clientY-rect.top:rect.height/2)+'px';action.append(ripple);
          const cleanup=()=>demo.querySelectorAll('.sg-ripple-circle').forEach(node=>node.remove());finishes.set(demo,cleanup);later(demo,cleanup,700);break;
        }
        case 'scramble': {
          cancel(demo);const text=demo.querySelector('.sg-scramble'),target='UNFOLD';
          const complete=()=>{text.textContent=target;};finishes.set(demo,complete);
          if(stopped()){complete();break;}
          let frame=0;const chars='✧◇ABCDEFGHJKLMNPQRSTUVWXYZ';
          const tick=()=>{text.textContent=[...target].map((c,i)=>i<Math.floor(frame/3)?c:chars[(frame*7+i*5)%chars.length]).join('');frame++;if(frame<=target.length*3)later(demo,tick,40);else complete();};tick();break;
        }
        case 'type': {
          cancel(demo);const text=demo.querySelector('.sg-typed'),target='Make room\nfor wonder.';
          text.style.whiteSpace='pre-line';const complete=()=>{text.textContent=target;};finishes.set(demo,complete);
          if(stopped()){complete();break;}
          let length=0;const tick=()=>{text.textContent=target.slice(0,++length);if(length<target.length)later(demo,tick,65);};tick();break;
        }
        case 'rotate': {
          const words=['dreamers.','makers.','explorers.'];const index=((Number(demo.dataset.word)||0)+1)%words.length;
          demo.dataset.word=index;demo.querySelector('.sg-rotating-word').textContent=words[index];
          action.classList.remove('sg-word-change');if(!stopped()){void action.offsetWidth;action.classList.add('sg-word-change');}break;
        }
        case 'dock':demo.querySelector('.sg-dock-selection').textContent=action.getAttribute('aria-label').replace(' 선택','');break;
        case 'tab': {
          const index=Number(action.dataset.tab);for(const item of demo.querySelectorAll('[data-action="tab"]'))item.setAttribute('aria-pressed',String(item===action));
          const panel=demo.querySelector('.sg-tab-panel');panel.querySelector('strong').textContent=['Find your next spark.','Make a little magic.','Keep the good things.'][index];
          panel.querySelector('.sg-tab-symbol').textContent=['✳','✺','◈'][index];panel.lastElementChild.textContent=['새로운 시작을 위한 작은 발견','당신만의 색으로 만드는 시간','다시 꺼내 보고 싶은 순간'][index];break;
        }
        case 'stack': {
          const current=((Number(demo.dataset.stack)||0)+1)%3;demo.dataset.stack=current;
          for(const sheet of demo.querySelectorAll('[data-sheet]')){const order=(Number(sheet.dataset.sheet)-current+3)%3;sheet.style.setProperty('--i',String(order));sheet.setAttribute('aria-hidden',String(order!==0));}
          demo.querySelector('[data-stack-status]').textContent=`${current+1} / 3`;break;
        }
        case 'flip': {
          const flipped=action.getAttribute('aria-pressed')!=='true';action.setAttribute('aria-pressed',String(flipped));
          action.querySelector('.sg-flip-front').setAttribute('aria-hidden',String(flipped));action.querySelector('.sg-flip-back').setAttribute('aria-hidden',String(!flipped));break;
        }
        case 'count': {
          cancel(demo);const counter=demo.querySelector('.sg-counter');const complete=()=>{counter.textContent='2,480';};finishes.set(demo,complete);
          if(stopped()){complete();break;}replay(demo);let step=0;
          const tick=()=>{counter.textContent=Math.round(2480*(1-(1-step/24)**3)).toLocaleString('en-US');if(step++<24)later(demo,tick,35);else complete();};tick();break;
        }
        case 'send': {
          if(action.disabled)break;cancel(demo);action.disabled=true;action.dataset.state='pending';action.querySelector('.sg-send-label').textContent='Sending…';action.querySelector('.sg-send-icon').textContent='◌';setStatus('인사를 보내고 있어요.');
          const complete=()=>{action.disabled=false;action.dataset.state='done';action.querySelector('.sg-send-label').textContent='Hello, sent!';action.querySelector('.sg-send-icon').textContent='✓';setStatus('인사를 보냈어요. 다시 눌러볼 수 있어요.');};
          finishes.set(demo,complete);later(demo,complete,700);break;
        }
        case 'menu': {
          const open=action.getAttribute('aria-expanded')!=='true';action.setAttribute('aria-expanded',String(open));demo.querySelector('.sg-menu-items').hidden=!open;break;
        }
        case 'menu-item':demo.querySelector('.sg-menu-caption').textContent=action.textContent.replace('↗','').trim()+'를 선택했어요.';break;
        case 'previous':case 'next': {
          const index=Math.min(2,Math.max(0,(Number(demo.dataset.slide)||0)+(action.dataset.action==='next'?1:-1)));
          demo.dataset.slide=index;track.scrollTo({left:track.children[index].offsetLeft-track.children[0].offsetLeft,behavior:stopped()?'instant':'smooth'});demo.querySelector('.sg-horizontal-count').textContent=`${index+1} / 3`;break;
        }
        case 'price': {
          for(const item of demo.querySelectorAll('[data-action="price"]'))item.setAttribute('aria-pressed',String(item===action));demo.querySelector('.sg-price strong').textContent='$'+action.dataset.price;break;
        }
        case 'quote-prev':case 'quote-next': {
          const index=((Number(demo.dataset.quote)||0)+(action.dataset.action==='quote-next'?1:2))%3;demo.dataset.quote=index;
          const quotes=['작은 디테일 하나가\n화면의 인상을 바꾸네요.','직접 만져보니\n아이디어가 더 선명해졌어요.','다음 화면을 만드는 일이\n조금 더 즐거워졌어요.'];
          const quote=demo.querySelector('.sg-quote');quote.style.whiteSpace='pre-line';quote.textContent=quotes[index];
          demo.querySelector('.sg-quote-avatar').textContent=['J','M','S'][index];demo.querySelector('.sg-quote-person').textContent=['Jin · Designer','Min · Developer','Sol · Maker'][index];demo.querySelector('.sg-quote-count').textContent=`${index+1} / 3`;break;
        }
      }
    });
    const flipBack=demo.querySelector('.sg-flip-back');if(flipBack)flipBack.setAttribute('aria-hidden','true');
    for(const sheet of demo.querySelectorAll('[data-sheet]'))sheet.setAttribute('aria-hidden',String(sheet.dataset.sheet!=='0'));
  }
  addEventListener('pagehide',()=>{for(const demo of demos){cancel(demo,true);demo.dataset.inView='false';}observer?.disconnect();motionObserver.disconnect();});
  addEventListener('pageshow',event=>{if(!event.persisted)return;for(const demo of demos){observer?.observe(demo);setVisible(demo,visible.has(demo));}motionObserver.observe(document.documentElement,{attributes:true,attributeFilter:['data-preview-motion']});});
})();

</script>
</body>
</html>

BEHIND THE EXAMPLE

이 장면을 만드는 원리

MORE TO EXPLORE

전체 보기