02속도 기반 생성 — 스크롤 속도 값이 빨라질수록 새로 생성되는 파티클의 빈도 값이 늘어나는 방식
스크롤 속도 값이 빨라질수록 한 프레임에 생성되는 파티클 개수 값이 늘어나고, 멈추면 생성 빈도 값이 기준치로 되돌아갑니다.
쓰임긴 랜딩 페이지의 섹션 전환 배경
SPAWN_GAINLAUNCH_GAINFRICTION
<main class="stage">
<div class="sp" id="sp">
<p class="sp__hint">
<svg class="sp__ico" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"/><path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128"/></g></svg>
<span>빠르게 끌수록 입자가 더 많이, 더 빠르게 튑니다</span>
</p>
<div class="sp__viewport" id="viewport" tabindex="0" role="region" aria-label="입자 분사 스크롤 영역">
<canvas class="sp__cv" id="cv" aria-hidden="true"></canvas>
<b class="sp__val" id="val" aria-hidden="true">0px/s</b>
<div class="sp__track" aria-hidden="true"></div>
</div>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// 변형 3개는 이 위 세 변수만 바꾼다. 계산 겹(분사율·마찰)은 index.html 의 step() 에 있다.
$duration: 2s;
$easing: $ease-out;
$color: $subject-orange-deep;
@include stage($stage-yellow);
.sp {
--particle-color: #{$color};
display: flex;
flex-direction: column;
align-items: center;
gap: $sp-2;
width: min(400px, 92vw);
}
.sp__hint {
display: flex;
align-items: center;
gap: $sp-2;
margin: 0;
color: rgba($stage-ink, .78);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
}
.sp__ico {
width: 16px;
height: 16px;
flex: none;
color: $subject-orange-deep;
}
.sp__viewport {
position: relative;
width: 100%;
height: 176px;
overflow-y: auto;
overflow-x: hidden;
border-radius: $r-card;
background: rgba($stage-ink, .08);
touch-action: pan-y;
scrollbar-width: thin;
}
.sp__cv {
position: sticky;
top: 0;
left: 0;
display: block;
width: 100%;
height: 176px;
}
.sp__track {
height: 320%;
}
.sp__val {
position: absolute;
top: $sp-2;
right: $sp-2;
padding: $sp-1 $sp-2;
border-radius: $r-pill;
background: rgba($stage-ink, .5);
color: $subject-cream;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
pointer-events: none;
transition: opacity $duration $easing;
}
@media (max-width: 340px) {
.sp__hint { font-size: 11px; }
.sp__viewport, .sp__cv { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
.sp__viewport { scroll-behavior: auto; }
.sp__val { transition: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffd23f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.sp {
--particle-color: #c93000;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: min(400px, 92vw);
}
.sp__hint {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: rgba(23, 20, 26, 0.78);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
}
.sp__ico {
width: 16px;
height: 16px;
flex: none;
color: #c93000;
}
.sp__viewport {
position: relative;
width: 100%;
height: 176px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 16px;
background: rgba(23, 20, 26, 0.08);
touch-action: pan-y;
scrollbar-width: thin;
}
.sp__cv {
position: sticky;
top: 0;
left: 0;
display: block;
width: 100%;
height: 176px;
}
.sp__track {
height: 320%;
}
.sp__val {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(23, 20, 26, 0.5);
color: #fff7e6;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
pointer-events: none;
transition: opacity 2s ease-out;
}
@media (max-width: 340px) {
.sp__hint {
font-size: 11px;
}
.sp__viewport, .sp__cv {
height: 120px;
}
}
@media (prefers-reduced-motion: reduce) {
.sp__viewport {
scroll-behavior: auto;
}
.sp__val {
transition: none;
}
}(function () {
var root = document.getElementById('sp');
var viewport = document.getElementById('viewport');
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var val = document.getElementById('val');
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var isDemo = true;
function makeLcg(seed) {
var s = seed >>> 0;
return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
}
var rng = makeLcg(4271);
var css = getComputedStyle(root);
var PARTICLE_COLOR = css.getPropertyValue('--particle-color').trim() || '#ffd23f';
// 계산 겹: 분사율 매핑(spawn-rate mapping) — 스크롤 속도(px/s)의 절대값이 초당 입자 발생 수를 정하고,
// 부호가 발사 방향을 정한다. 발사된 입자는 마찰(FRICTION)로 속도가 지수적으로 줄며 사라진다.
var SPAWN_GAIN = 0.1; // |스크롤 속도| → 초당 입자 수
var LAUNCH_GAIN = 0.95; // 스크롤 속도 → 입자 발사 속도(px/s)
var FRICTION = 1.15; // 속도 감쇠율 (1/s)
var LIFE_MS = 1300;
var MAX_PARTICLES = 150;
var W = 0, H = 0, dpr = 1;
var particles = [];
var spawnAcc = 0;
function fit() {
var r = viewport.getBoundingClientRect();
dpr = window.devicePixelRatio || 1;
W = r.width; H = r.height;
cv.width = Math.round(W * dpr);
cv.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
var scrollPos = 0, scrollVel = 0, scrollDir = 0, idleMs = 0, lastTop = 0, lastT = 0;
function sampleScroll(now) {
var top = viewport.scrollTop;
var max = Math.max(1, viewport.scrollHeight - viewport.clientHeight);
scrollPos = top / max;
var dt = lastT ? Math.max(1, now - lastT) : 16;
var v = (top - lastTop) / dt * 1000;
scrollVel += (v - scrollVel) * 0.35;
if (Math.abs(scrollVel) > 4) { scrollDir = scrollVel > 0 ? 1 : -1; idleMs = 0; } else { idleMs += dt; }
lastTop = top; lastT = now;
}
viewport.addEventListener('scroll', function () {
sampleScroll(performance.now());
if (reduce) paintStatic();
});
function human() { if (isDemo) { root.classList.remove('is-demo'); isDemo = false; } }
['wheel', 'touchstart', 'pointerdown'].forEach(function (evt) {
viewport.addEventListener(evt, human, { passive: true });
});
function spawnOne(now) {
var p = {
x: W * 0.5 + (rng() - 0.5) * 20,
y: H * 0.5 + (rng() - 0.5) * 20,
vx: scrollVel * LAUNCH_GAIN + (rng() - 0.5) * 40,
vy: (rng() - 0.5) * 60 - scrollDir * 20,
r: 2 + rng() * 3.2,
born: now
};
particles.push(p);
if (particles.length > MAX_PARTICLES) particles.shift();
}
function step(now, dtSec) {
var rate = Math.min(140, Math.abs(scrollVel) * SPAWN_GAIN);
spawnAcc += rate * dtSec;
while (spawnAcc >= 1) { spawnOne(now); spawnAcc -= 1; }
var decay = Math.exp(-FRICTION * dtSec);
for (var i = particles.length - 1; i >= 0; i--) {
var p = particles[i];
p.vx *= decay; p.vy *= decay;
p.x += p.vx * dtSec;
p.y += p.vy * dtSec;
if (now - p.born > LIFE_MS) particles.splice(i, 1);
}
}
function paint(now) {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = PARTICLE_COLOR;
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
var t = (now - p.born) / LIFE_MS;
ctx.globalAlpha = Math.max(0, 1 - t) * 0.85;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r * (1 - t * 0.4), 0, Math.PI * 2); ctx.fill();
}
ctx.globalAlpha = 1;
}
function updateVal() { val.textContent = Math.round(Math.abs(scrollVel)) + 'px/s'; }
function paintStatic() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = PARTICLE_COLOR;
var n = 10 + Math.round(scrollPos * 40);
for (var i = 0; i < n; i++) {
var ang = (i / n) * Math.PI * 2;
var rad = 12 + (i % 5) * 10 + scrollPos * 20;
var x = W * 0.5 + Math.cos(ang) * rad;
var y = H * 0.5 + Math.sin(ang) * rad * 0.6;
ctx.globalAlpha = 0.6;
ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill();
}
ctx.globalAlpha = 1;
updateVal();
}
var lastFrameT = 0;
function frame(now) {
if (!lastFrameT) lastFrameT = now;
var dtSec = Math.min(0.05, (now - lastFrameT) / 1000);
lastFrameT = now;
step(now, dtSec);
paint(now);
updateVal();
requestAnimationFrame(frame);
}
var DRIVE_PERIOD_MS = 2000;
var driveStart = 0;
function triangle(frac) { return frac < 0.5 ? frac * 2 : 2 - frac * 2; }
function driveTick(now) {
if (!driveStart) driveStart = now;
if (isDemo && !reduce) {
var frac = ((now - driveStart) % DRIVE_PERIOD_MS) / DRIVE_PERIOD_MS;
var w = triangle(frac);
var max = Math.max(1, viewport.scrollHeight - viewport.clientHeight);
viewport.scrollTop = w * max;
}
requestAnimationFrame(driveTick);
}
window.addEventListener('resize', fit);
fit();
if (reduce) {
root.classList.add('is-still');
sampleScroll(performance.now());
paintStatic();
} else {
requestAnimationFrame(frame);
requestAnimationFrame(driveTick);
}
})();// VelocitySpawn — vanilla 판(run/370/demo/02-scroll-particle-velocity-spawn/index.html) 의 React 포트.
// 계산 겹: 분사율 매핑(spawn-rate mapping) — 스크롤 속도(px/s)의 절대값이 초당 입자 발생 수를 정하고,
// 부호가 발사 방향을 정한다. 발사된 입자는 마찰(FRICTION)로 속도가 지수적으로 줄며 사라진다.
import { useEffect, useRef } from "react";
import styles from "./VelocitySpawn.module.scss";
type Box<T> = { current: T };
interface Particle { x: number; y: number; vx: number; vy: number; r: number; born: number; }
export default function VelocitySpawn() {
const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
const viewportRef = useRef(null) as unknown as Box<HTMLDivElement>;
const canvasRef = useRef(null) as unknown as Box<HTMLCanvasElement>;
const valRef = useRef(null) as unknown as Box<HTMLElement>;
const rafFrameRef = useRef(0) as unknown as Box<number>;
const rafDriveRef = useRef(0) as unknown as Box<number>;
useEffect(() => {
const root = rootRef.current;
const viewport = viewportRef.current;
const canvas = canvasRef.current;
const val = valRef.current;
if (!root || !viewport || !canvas || !val) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let isDemo = true;
function makeLcg(seed: number) {
let s = seed >>> 0;
return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
}
const rng = makeLcg(4271);
const css = getComputedStyle(root);
const PARTICLE_COLOR = css.getPropertyValue("--particle-color").trim() || "#ffd23f";
const SPAWN_GAIN = 0.1;
const LAUNCH_GAIN = 0.95;
const FRICTION = 1.15;
const LIFE_MS = 1300;
const MAX_PARTICLES = 150;
let W = 0, H = 0, dpr = 1;
let particles: Particle[] = [];
let spawnAcc = 0;
function fit() {
const r = viewport!.getBoundingClientRect();
dpr = window.devicePixelRatio || 1;
W = r.width; H = r.height;
canvas!.width = Math.round(W * dpr);
canvas!.height = Math.round(H * dpr);
ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
}
let scrollPos = 0, scrollVel = 0, scrollDir = 0, idleMs = 0, lastTop = 0, lastT = 0;
function sampleScroll(now: number) {
const top = viewport!.scrollTop;
const max = Math.max(1, viewport!.scrollHeight - viewport!.clientHeight);
scrollPos = top / max;
const dt = lastT ? Math.max(1, now - lastT) : 16;
const v = (top - lastTop) / dt * 1000;
scrollVel += (v - scrollVel) * 0.35;
if (Math.abs(scrollVel) > 4) { scrollDir = scrollVel > 0 ? 1 : -1; idleMs = 0; } else { idleMs += dt; }
lastTop = top; lastT = now;
}
function onScroll() {
sampleScroll(performance.now());
if (reduce) paintStatic();
}
viewport.addEventListener("scroll", onScroll);
function human() { if (isDemo) { isDemo = false; } }
viewport.addEventListener("wheel", human, { passive: true });
viewport.addEventListener("touchstart", human, { passive: true });
viewport.addEventListener("pointerdown", human, { passive: true });
function spawnOne(now: number) {
const p: Particle = {
x: W * 0.5 + (rng() - 0.5) * 20,
y: H * 0.5 + (rng() - 0.5) * 20,
vx: scrollVel * LAUNCH_GAIN + (rng() - 0.5) * 40,
vy: (rng() - 0.5) * 60 - scrollDir * 20,
r: 2 + rng() * 3.2,
born: now,
};
particles.push(p);
if (particles.length > MAX_PARTICLES) particles.shift();
}
function step(now: number, dtSec: number) {
const rate = Math.min(140, Math.abs(scrollVel) * SPAWN_GAIN);
spawnAcc += rate * dtSec;
while (spawnAcc >= 1) { spawnOne(now); spawnAcc -= 1; }
const decay = Math.exp(-FRICTION * dtSec);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.vx *= decay; p.vy *= decay;
p.x += p.vx * dtSec;
p.y += p.vy * dtSec;
if (now - p.born > LIFE_MS) particles.splice(i, 1);
}
}
function paint(now: number) {
ctx!.clearRect(0, 0, W, H);
ctx!.fillStyle = PARTICLE_COLOR;
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const t = (now - p.born) / LIFE_MS;
ctx!.globalAlpha = Math.max(0, 1 - t) * 0.85;
ctx!.beginPath(); ctx!.arc(p.x, p.y, p.r * (1 - t * 0.4), 0, Math.PI * 2); ctx!.fill();
}
ctx!.globalAlpha = 1;
}
function updateVal() { val!.textContent = Math.round(Math.abs(scrollVel)) + "px/s"; }
function paintStatic() {
ctx!.clearRect(0, 0, W, H);
ctx!.fillStyle = PARTICLE_COLOR;
const n = 10 + Math.round(scrollPos * 40);
for (let i = 0; i < n; i++) {
const ang = (i / n) * Math.PI * 2;
const rad = 12 + (i % 5) * 10 + scrollPos * 20;
const x = W * 0.5 + Math.cos(ang) * rad;
const y = H * 0.5 + Math.sin(ang) * rad * 0.6;
ctx!.globalAlpha = 0.6;
ctx!.beginPath(); ctx!.arc(x, y, 2, 0, Math.PI * 2); ctx!.fill();
}
ctx!.globalAlpha = 1;
updateVal();
}
let lastFrameT = 0;
function frame(now: number) {
if (!lastFrameT) lastFrameT = now;
const dtSec = Math.min(0.05, (now - lastFrameT) / 1000);
lastFrameT = now;
step(now, dtSec);
paint(now);
updateVal();
rafFrameRef.current = requestAnimationFrame(frame);
}
const DRIVE_PERIOD_MS = 2000;
let driveStart = 0;
function triangle(frac: number) { return frac < 0.5 ? frac * 2 : 2 - frac * 2; }
function driveTick(now: number) {
if (!driveStart) driveStart = now;
if (isDemo && !reduce) {
const frac = ((now - driveStart) % DRIVE_PERIOD_MS) / DRIVE_PERIOD_MS;
const w = triangle(frac);
const max = Math.max(1, viewport!.scrollHeight - viewport!.clientHeight);
viewport!.scrollTop = w * max;
}
rafDriveRef.current = requestAnimationFrame(driveTick);
}
function onResize() { fit(); }
window.addEventListener("resize", onResize);
fit();
if (reduce) {
sampleScroll(performance.now());
paintStatic();
} else {
rafFrameRef.current = requestAnimationFrame(frame);
rafDriveRef.current = requestAnimationFrame(driveTick);
}
return () => {
window.removeEventListener("resize", onResize);
viewport.removeEventListener("scroll", onScroll);
viewport.removeEventListener("wheel", human);
viewport.removeEventListener("touchstart", human);
viewport.removeEventListener("pointerdown", human);
cancelAnimationFrame(rafFrameRef.current);
cancelAnimationFrame(rafDriveRef.current);
};
}, []);
return (
<main className={styles.stage}>
<div className={styles.root} ref={rootRef}>
<p className={styles.hint}>
<svg className={styles.icon} viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2" /><path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128" /></g></svg>
<span>빠르게 끌수록 입자가 더 많이, 더 빠르게 튑니다</span>
</p>
<div className={styles.viewport} ref={viewportRef} tabIndex={0} role="region" aria-label="입자 분사 스크롤 영역">
<canvas className={styles.canvas} ref={canvasRef} aria-hidden="true" />
<b className={styles.val} ref={valRef} aria-hidden="true">0px/s</b>
<div className={styles.track} aria-hidden="true" />
</div>
</div>
</main>
);
}02 속도 기반 생성 — 스크롤 속도 값이 빨라질수록 새로 생성되는 파티클의 빈도 값이 늘어나는 방식 — 측정 누적면적 8.292% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 스크롤 파티클 배경 9종 — 값 하나로 흐름이 달라지는 캔버스 장면
이 데모가 속한 글
스크롤 파티클 배경 9종 — 값 하나로 흐름이 달라지는 캔버스 장면파티클 배경 9종을 값 기준으로 나누면, 아홉 가지 중 하나는 스크롤 속도 값이 빨라질수록 파티클이 생성되는 빈도 값이 늘어나고, 하나는 파티클마다 다른 깊이 값에 따라 같은 스크롤 이동량이 서로 다른 거리로 적용되 이 글의 데모 전부 보기
