Style Gallery.

Scroll effects COLLECTION

Scroll progress

읽는 만큼 차오르는 선

스크롤 더 보기
LIVE PREVIEW
FIELD NOTES0%
The art of
paying attention.

01 / Look closer작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.

02 / Notice more작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.

03 / Make space작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.

04 / Begin again작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.

스크롤 · 키보드

이 예제의 코드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>Scroll progress</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="scroll-progress" data-in-view="false" style="--demo-accent:#efaac5" role="group" aria-label="읽는 만큼 차오르는 선 실행 예제"><div class="sg-reading-widget"><div class="sg-reading-header"><span>FIELD NOTES</span><span class="sg-reading-percent">0%</span></div><div class="sg-reading-bar"><i></i></div><div class="sg-scrollbox sg-reading-box" tabindex="0" role="region" aria-label="읽기 진행률 예제: 안에서 스크롤"><strong>The art of<br>paying attention.</strong><p><b>01 / Look closer</b>작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.</p><p><b>02 / Notice more</b>작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.</p><p><b>03 / Make space</b>작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.</p><p><b>04 / Begin again</b>작은 차이를 발견하는 순간, 익숙한 화면에도 새로운 이야기가 생깁니다. 천천히 읽으며 다음 장면으로 이동해 보세요.</p></div></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

전체 보기