Web制作で「ここをこう動かして」を正確に伝えるための、用語・意味・動くデモ・コピーできるコード・指示例のカタログ。番号（例：#14 チルト）で指示できます。
すべての動きの土台。この4語が分かると大半の指示が通じます。
状態が変わるとき（ホバー等）を「一瞬」ではなく「滑らか」に。時間・緩急を指定。
.box{
transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s;
}
.box:hover{
transform: translateY(-14px) rotate(-6deg) scale(1.08);
}
「transition でホバー時にふわっと動かして（0.4秒・ease-out、急に切り替えない）」
動きの「緩急」。等速か、最後スッと減速か、ビヨンと跳ねるか。印象の8割はここ。
/* linear */ transition-timing-function: linear; /* 標準 */ transition-timing-function: ease; /* 最後スッと */ transition-timing-function: cubic-bezier(.16,1,.3,1); /* ビヨンと跳ね */ transition-timing-function: cubic-bezier(.68,-.6,.32,1.6);
「easing は cubic-bezier(.16,1,.3,1)（ease-out強め）で上品に」／「跳ねるなら cubic-bezier(.68,-.6,.32,1.6)（オーバーシュート）」
複数段階の動き＝ずっと繰り返す動き（浮遊・点滅・回転）を作る。
@keyframes floaty{
0%,100%{ transform: translateY(0) rotate(0); }
50% { transform: translateY(-22px) rotate(8deg); }
}
.box{ animation: floaty 2.6s ease-in-out infinite; }
「@keyframes で上下に floating（2.6秒ループ・ease-in-out・-22px）させて」
要素を「移動・拡大・回転・傾け」る。レイアウトを崩さず軽い＝動きの主役。
transform: translateX(30px); /* 移動 */ transform: scale(1.25); /* 拡大 */ transform: rotate(45deg); /* 回転 */ transform: skewX(-16deg); /* 傾け */ /* まとめて: transform: translateY(-10px) scale(1.1) rotate(4deg); */
「transform で 5度 rotate＋1.1倍 scale して（レイアウトは崩さない）」
HPで一番使う。読み進むほど気持ちよく見せる系。
画面に入ってきた要素をフェード＋少し上へ。定番中の定番。
/* CSS */ .rv{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.8,.2,1)}
/* CSS */ .rv.in{opacity:1;transform:none}
/* JS */
const io=new IntersectionObserver(es=>es.forEach(x=>{
if(x.isIntersecting){ x.target.classList.add('in'); io.unobserve(x.target); }
}),{threshold:.15});
document.querySelectorAll('.rv').forEach(el=>io.observe(el));
「scroll reveal（IntersectionObserver・fade-up）で。24px下→0・0.7秒 ease-out」
複数要素を「同時」でなく少しずつ遅らせて出す。リズムが生まれる。
// 各要素に少しずつ遅延を付ける
items.forEach((el,i)=>{ el.style.transitionDelay = (i*90) + 'ms'; });
// → まとめて .run を付ければ順番に出る（CSS側で transition 定義）
「stagger で子要素を90msずつ遅延して順番に出して」
背景と前景を違う速さで動かし、奥行きを出す。ここではマウスに反応。
// スクロール量に応じて、層ごとに違う速さで動かす
addEventListener('scroll',()=>{
const y = scrollY;
back.style.transform = `translateY(${y * 0.30}px)`; // 奥＝速い
front.style.transform = `translateY(${y * 0.08}px)`; // 前＝遅い
},{passive:true});
「parallax で背景を前景の0.3倍速で動かして奥行きを」
ロゴや文字を横に無限ループで流す。ホバーで一時停止。
.track{ display:inline-flex; white-space:nowrap; animation: marq 16s linear infinite; }
@keyframes marq{ to{ transform: translateX(-50%); } } /* 中身を2連結して -50% */
.marquee:hover .track{ animation-play-state: paused; }
「marquee（無限ループ・16秒 linear・ホバーで一時停止）でロゴ帯を横に流して」
スクロール中、要素を上に貼り付けて固定。見出しや画像の「留め」。
ここをスクロールしてみてください。上の見出しが貼り付いたまま…
…次の章まで残ります。
章が変わると見出しも入れ替わる。長文セクションの目印に。
下端
.pin{ position: sticky; top: 0; } /* 親の高さの範囲で上に貼り付く */
「position: sticky で見出しをスクロール中 top:0 に固定して」
スクロール量に連動してバーが伸びる。読み物・LPの現在地表示。
el.addEventListener('scroll',()=>{
const p = el.scrollTop / (el.scrollHeight - el.clientHeight);
bar.style.width = (p * 100) + '%';
});
「scroll progress bar をページ上部に（scrollTop / scrollHeight で幅%）」
触ったときの小さな反応。上質さはここに出る。
カードをホバーで少し浮かせる（影＋translateY）。触れる合図。
.card{ transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
「hover lift で -8px translateY＋影を付けて（0.3秒 ease-out）」
リンクの下線が左からスッと伸びる。ナビの定番。
a{ position: relative; }
a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
background: currentColor; transition: width .3s cubic-bezier(.2,.8,.2,1); }
a:hover::after{ width: 100%; }
「underline grow でリンクの下線を左から width:0→100% に」
クリック位置から波紋が広がる。押した実感（Material風）。
btn.addEventListener('click',e=>{
const r=document.createElement('span'); r.className='rip';
const rect=btn.getBoundingClientRect(), d=Math.max(rect.width,rect.height);
r.style.width=r.style.height=d+'px';
r.style.left=(e.clientX-rect.left)+'px'; r.style.top=(e.clientY-rect.top)+'px';
btn.appendChild(r); setTimeout(()=>r.remove(),600);
});
「ripple（Material風）でクリック位置から波紋を出して」
マウス位置に応じてカードが3Dに傾く＋光沢。リッチな見せ場。
card.addEventListener('mousemove',e=>{
const r=card.getBoundingClientRect();
const x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
card.style.transform=`rotateY(${x*16}deg) rotateX(${-y*16}deg)`;
card.style.setProperty('--mx',(x+.5)*100+'%'); card.style.setProperty('--my',(y+.5)*100+'%');
});
card.addEventListener('mouseleave',()=>card.style.transform='');
「tilt でマウス追従の3D傾き（±16度）＋光沢を付けて」
ボタンがカーソルに少し吸い付く。目を引くCTAに。
btn.addEventListener('mousemove',e=>{
const r=btn.getBoundingClientRect();
const x=e.clientX-r.left-r.width/2, y=e.clientY-r.top-r.height/2;
btn.style.transform=`translate(${x*0.35}px, ${y*0.45}px)`;
});
btn.addEventListener('mouseleave',()=>btn.style.transform='');
「magnetic button でCTAをカーソルに0.35倍寄せて」
本格的な3D・シェーダ。重いので"見せ場だけ"に。CDNのthree.jsで動きます。
漂う点群。背景やヒーローの奥に敷くと一気に「動くサイト」感。
import * as THREE from 'three';
const g=new THREE.BufferGeometry();
const N=1200, pos=new Float32Array(N*3);
for(let i=0;i<N*3;i++) pos[i]=(Math.random()-.5)*10;
g.setAttribute('position',new THREE.BufferAttribute(pos,3));
const pts=new THREE.Points(g,new THREE.PointsMaterial({size:.03,color:0xC6F24E}));
scene.add(pts);
// render loop: pts.rotation.y += 0.0015;
「three.js の Points で漂うパーティクル（1400点・色◯◯・ゆっくり回転）を背景に」
フラグメントシェーダで動くグラデ／波。ヒーロー背景に映える。
// uniform float uTime; varying vec2 vUv;
void main(){
vec2 uv = vUv;
float w = sin(uv.x*6.0 + uTime) * 0.5 + 0.5;
float w2= sin(uv.y*8.0 - uTime*1.3) * 0.5 + 0.5;
vec3 col = mix(vec3(0.05,0.55,0.52), vec3(0.78,0.95,0.30), w*w2);
gl_FragColor = vec4(col, 1.0);
}
「ShaderMaterial（fragment shader・uTime）でヒーロー背景に動くグラデ波を（緑〜シアン）」
画像にマウスを乗せると波打つ／ゆがむ。ギャラリーの高級感。
// uniform sampler2D uTex; uniform float uHover; uniform float uTime;
void main(){
vec2 uv = vUv;
float amp = uHover * 0.06; // ホバー時だけ歪む
uv.x += sin(uv.y*14.0 + uTime*2.0) * amp;
uv.y += cos(uv.x*12.0 + uTime*1.6) * amp;
gl_FragColor = texture2D(uTex, uv);
}
「WebGL の UV distortion で画像をホバー時だけ歪ませて（amp 0.06・控えめ）」
動きじゃなく「形」を変える系。角丸・斜めカット・多角形・有機的な形など。
四角の角丸を非対称にして、有機的な形へ変形。ホバーでぐにゃっと。
.box{ transition: border-radius .5s cubic-bezier(.2,.8,.2,1), transform .5s; }
.box:hover{ border-radius: 50% 50% 40% 60% / 60% 40% 55% 45%; transform: rotate(8deg); }
/* border-radius は 4隅×水平/垂直 で自由な形が作れる */
「border-radius を非対称（例: 50% 50% 40% 60% / 60% 40% 55% 45%）にして有機的な形に」
要素の縁を斜めに切る。セクションの境目や画像に動きのある形を。
.cut{ clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); transition: clip-path .5s; }
.cut:hover{ clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 78%); }
/* polygon は「点(x y)」を並べて多角形に切り抜く */
「clip-path: polygon() でセクション下辺を斜めカット／画像を平行四辺形に」
矢印・五角形バッジ・星などの「形」を CSS だけで作る。
.arrow{ clip-path: polygon(0 20%,60% 20%,60% 0,100% 50%,60% 100%,60% 80%,0 80%); }
.badge{ clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.star { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
「clip-path: polygon で矢印／五角形バッジ／星の形にして」
アメーバ状にゆっくり形が変わり続ける。背景装飾やアイコン枠に。
@keyframes blobby{
0%,100%{ border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%; }
50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
}
.blob{ animation: blobby 7s ease-in-out infinite; }
「@keyframes で border-radius を動かす blob（7秒ループ）を背景に」
文字自体をグラデで塗り、色が横に流れ続ける。見出しの主役に。
.t{ background: linear-gradient(120deg, #C6F24E, #59E6D3, #FF7A59);
-webkit-background-clip: text; background-clip: text; color: transparent;
background-size: 200% auto; animation: slidebg 6s linear infinite; }
@keyframes slidebg{ to{ background-position: 200% center; } }
「gradient text（background-clip:text）で見出しを塗り、background-position を流して」
ガラス質感・スポットライト・文字の演出など、"らしさ"を足す仕上げ。
文字にグラデーション（流れなしの静止版）。ロゴやキーワードに。
.t{ background: linear-gradient(92deg, #C6F24E, #59E6D3);
-webkit-background-clip: text; background-clip: text; color: transparent; }
「gradient text（background-clip:text・92度）でキーワードをグラデに」
1文字ずつ時間差で出す。見出し登場の"おっ"を作る。
// 文字を1つずつ span に分割
el.innerHTML = [...el.textContent].map(c =>
`<span class="ch">${c===' '?' ':c}</span>`).join('');
el.querySelectorAll('.ch').forEach((s,i)=> s.style.transitionDelay = (i*45)+'ms');
el.classList.add('run'); // CSS: .ch{opacity:0;transform:translateY(20px)} .run .ch{opacity:1;transform:none}
「text reveal（1文字ずつ span 分割・45ms stagger）で見出しを出して」
背景がすりガラス越しに透ける質感。カード・ナビの上品な浮遊感。
.g{ background: rgba(255,255,255,.12);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.35); border-radius: 16px; }
「glassmorphism でカードを（backdrop-filter: blur(12px)・半透明白・細い白枠）」
カーソルの位置に光が当たる。暗い面を"探る"インタラクション。
/* CSS */ .spot::before{ content:""; position:absolute; inset:0;
background: radial-gradient(220px circle at var(--x) var(--y), rgba(198,242,78,.28), transparent 60%); }
/* JS */ el.addEventListener('mousemove', e=>{
const r=el.getBoundingClientRect();
el.style.setProperty('--x', (e.clientX-r.left)+'px');
el.style.setProperty('--y', (e.clientY-r.top)+'px');
});
「spotlight follow（radial-gradient がカーソル追従）を暗い面に」
画像に乗せた時の反応。反転・上下切替・別画像・ズーム・モノクロ→カラーなど、同じ枠で何通りも。
ホバーで画像/カードがくるっと裏返り、裏面（別情報）を見せる。
.fcard{perspective:800px} .inner{transition:transform .6s;transform-style:preserve-3d}
.fcard:hover .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden} .back{transform:rotateY(180deg)}
「flip（rotateY 180・0.6秒）でホバー時に画像を裏返して」
ホバーで1枚目が上へ抜け、2枚目が下から入る。動きのある切替。
.a{transition:transform .4s} .b{transform:translateY(100%);transition:transform .4s}
.iframe:hover .a{transform:translateY(-100%)} .iframe:hover .b{transform:translateY(0)}
「slide swap（上下・0.4秒）でホバー時に画像を入れ替えて」
ホバーで2枚目の画像にフェードで切り替わる（別カット・色違い）。
.b{opacity:0;transition:opacity .45s} .iframe:hover .b{opacity:1} /* 2枚重ねてフェード */
「image swap（crossfade 0.45秒）でホバー時に別画像へ」
枠は固定のまま中の画像だけ拡大。奥行きと注目を作る。
.iframe{overflow:hidden} .gimg{transition:transform .55s} .iframe:hover .gimg{transform:scale(1.18)}
「zoom on hover（scale 1.18・枠は固定）で画像を拡大」
通常はモノクロ、ホバーで色が戻る。上品な写真ギャラリー向け。
.gimg{filter:grayscale(1);transition:filter .45s} .iframe:hover .gimg{filter:none}
「grayscale(1)→noneでホバー時にモノクロから色を戻して」
ホバーで説明パネルが下からスッと上がる。ギャラリーの定番。
.cap{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);transition:transform .35s}
.iframe:hover .cap{transform:translateY(0)}
「caption slide-upでホバー時に説明を下から出して」
画像がゆっくり拡大＋移動し続ける。静止画に"生き"を与える定番（自動）。
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.25) translate(-4%,-3%)}}
.gimg{animation:kenburns 12s ease-in-out infinite alternate} /* 枠は overflow:hidden */
「Ken Burns（scale 1→1.25・ゆっくりパン・12秒）で写真を動かして」
数字や実績を動かして見せる。
数字が0から目標値までパラパラ増える。実績・件数の見せ場に。
// 0→to を dur秒でイーズアウト（scroll-inで発火）
const tick=now=>{const t=Math.min(1,(now-start)/dur);
el.textContent=Math.round(to*(1-Math.pow(1-t,3))).toLocaleString();
if(t<1)requestAnimationFrame(tick);}; requestAnimationFrame(tick);
「count-up（0→1280・1.6秒・イーズアウト）で数字を増やして」
ドラッグやタイピングなど、少し凝ったインタラクション。
仕切りを左右にドラッグして、2枚を境目で見比べる。制作前後・加工比較に。
/* CSS */ .top{clip-path:inset(0 calc(100% - var(--cmp,50%)) 0 0)} .bar{left:var(--cmp)}
/* JS */ box.addEventListener('pointermove',e=>{ if(!down)return;
const r=box.getBoundingClientRect();
box.style.setProperty('--cmp', Math.min(100,Math.max(0,(e.clientX-r.left)/r.width*100))+'%'); });
「before/after スライダーで2枚を仕切りドラッグで見比べさせて」
文字が1文字ずつ打たれる＋点滅カーソル。ヒーローのコピーに。
let i=0; const t=setInterval(()=>{ txt.textContent = text.slice(0,++i);
if(i>=text.length) clearInterval(t); }, speed); /* speed ms ごとに1文字 */
「typewriter（1文字70ms・点滅カーソル）で見出しを打って」
RGBがずれて震える。サイバー/音楽/ゲーム系の見出しに。
/* 同じ文字を2枚重ね、色をずらして clip-path をアニメ */
.glitch span::before{color:cyan;transform:translateX(-2px);animation:glx 2s infinite steps(3)}
.glitch span::after{color:orange;transform:translateX(2px);animation:glx 2.4s infinite steps(2) reverse}
「glitch text（RGBずらし＋clip-pathジッター）で見出しを震わせて」
横に並べてスワイプ/スクロールで送る（スナップ付き）。作品や商品の横並びに。
.row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.card{flex:0 0 60%;scroll-snap-align:center} /* 1枚ずつピタッと止まる */
「horizontal scroll（scroll-snap・カード60%）で横に送れるように」
線が自分で描かれていく。ロゴ・イラスト・下線の"手描き"感に。
path{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 2.4s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}} /* 線を"隠して"→徐々に見せる */
「SVG path draw（stroke-dashoffset）で線が描かれるように」
左から拭うように現れる。見出しや画像の"サッと出す"登場。
@keyframes wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.t{animation:wipe 1.6s cubic-bezier(.7,0,.3,1)} /* 右→左を開いていく */
「mask wipe（clip-path inset・左から）で見出しを拭うように出して」
3Dオブジェクトがくるくる回る。ヒーローの主役・製品の立体感に。
const mesh=new THREE.Mesh(new THREE.TorusKnotGeometry(1.15,0.38), new THREE.MeshNormalMaterial()); scene.add(mesh); // render loop: mesh.rotation.y += 0.01; mesh.rotation.x += 0.004;
「three.js の Mesh を回転（TorusKnot・MeshNormalMaterial・ゆっくり）」
「あの4つ」で終わりじゃない。大量描画・頂点変形・レイマーチなど、WebGLの本領。
676個の立方体を1回の描画で。マウスの位置から波が広がる。大量オブジェクトを軽く動かす基本。
const m=new THREE.InstancedMesh(box, mat, 26*26); // 676個を1ドローコール
for(...){ dummy.position.set(x, Math.sin(dist*3-t*3)*.5*Math.exp(-dist*.35), z);
dummy.updateMatrix(); m.setMatrixAt(i++, dummy.matrix); }
m.instanceMatrix.needsUpdate=true;
「InstancedMesh で格子を作り、マウスから波が広がるように」
球の頂点をシェーダで揺らし、液体/生き物のように脈動。ヒーローの主役に。
// 頂点を法線方向へ、時間で揺らす（noise/sinで） float d = sin(pos.x*3.+uTime)*.15 + sin(pos.y*4.+uTime*1.3)*.12 + sin(pos.z*5.-uTime*.9)*.1; vec3 p = position + normal * d; // ← これで球が有機的に脈動
「頂点シェーダで球を揺らす（法線方向にnoise変位・脈動する有機体）」
ジオメトリ無しで、シェーダだけで3Dを描く。溶け合う球（メタボール）＋ライティング。WebGLの真骨頂。
// SDF(距離関数)を smin で溶かし、光線を進めて当たりを探す
float map(vec3 p){ float d=sdSphere(p-a,.55); d=smin(d,sdSphere(p-b,.5),.45); return d; }
for(int i=0;i<56;i++){ p=ro+rd*t; d=map(p); if(d<.001)break; t+=d; } // レイマーチ
「raymarching で SDF メタボール（溶け合う球＋簡易ライティング）を背景に」
点の群れがマウスから逃げ、離れると戻る。GPUで大量の点をインタラクティブに。（枠内でマウス）
// 各点: マウスから離れる向きに押し、基準位置へ lerp で戻す const f = max(0, 1.3 - dist(base, mouse)) * 1.6; target = base + normalize(base - mouse) * f; pos += (target - pos) * 0.12; // バネ的に追従
「マウス反発パーティクル（点群がカーソルから逃げて戻る）を背景に」
描いた後にもう一手間。明るい所を滲ませて"発光"させる。ネオン/サイバー感。
import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
import {UnrealBloomPass} from 'three/addons/postprocessing/UnrealBloomPass.js';
composer.addPass(new RenderPass(scene,cam));
composer.addPass(new UnrealBloomPass(size, 1.5, 0.5, 0.0)); // 強さ,広がり,しきい値
「UnrealBloomPass で発光（明るい所を滲ませてネオン感）」
インクが流れるような有機的模様。ドメインワープしたノイズで"流体風"に（軽量シェーダ・本格simは重い）。
// ドメインワープ：ノイズの座標を、別のノイズでずらす → 流れる模様 vec2 q = vec2(fbm(uv + t*.15), fbm(uv + 5.2 - t*.12)); float f = fbm(uv + q*2.0); // これが"流体風"の核
「fluid風（domain-warped fbm）で流れる背景を（緑〜シアン）」
文字を立体に押し出して回す。ロゴやタイトルを3Dで。
import {FontLoader} from 'three/addons/loaders/FontLoader.js';
import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
const geo = new TextGeometry('littech', { font, size:.95, height:.28, bevelEnabled:true });
「TextGeometry で立体文字（bevel付き）を回して」
実際の3Dモデル（.glb）を読み込んで表示。製品・キャラの立体をそのまま。※読込失敗時は代替形状にフォールバック。
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
new GLTFLoader().load(url, g => { scene.add(g.scene); }); // ライト(Hemisphere+Directional)必須
「GLTFLoaderで.glbを読み込み、ライトを当てて回して」
ページのスクロール量に合わせて3Dが回る。このページをスクロールすると回ります。ヒーロー〜下層を通しで動かす演出。
// render loop で scrollY を回転に反映（＝スクロールで回る） mesh.rotation.y = scrollY * 0.004; mesh.rotation.x = scrollY * 0.002; // 本格的にはScrollTrigger等でセクションごとに"振り付け"する（土台側）
「scroll-linked 3D（scrollYで mesh.rotation を動かす）」
数千の点が渦を巻きながら流れ続ける。煙・インク・オーロラのような有機的な流れ。頂点シェーダで動かすのでCPUに優しい。
// 点を上へ流し（端で循環）、位置に応じて渦を掛ける＝流れ場 p.y = mod(p.y + t*1.6, 8.0) - 4.0; // 連続的に上昇＋循環 p.xz = rot(t*0.5 + length(p.xz)*0.35) * p.xz; // 渦（回転） gl_PointSize = uSize * (7.0 / -mvPos.z); // 手前ほど大きく（加算合成で発光）
「curl-noise の flow field 粒子（数千点が渦巻いて流れる・加算合成で発光）を背景に」
同じ点の集まりが、球⇄立方体と姿を変え続ける。2つの座標を混ぜるだけ。ロゴ⇄製品など"変身"の見せ場に。
// 形Aと形Bを同じ点数で用意し、uMix(0→1)で補間するだけ attribute vec3 aTarget; // 形B（例：立方体） vec3 p = mix(position, aTarget, uMix); // position=形A（例：球） // uMix = 0.5 + 0.5*sin(time) で 球⇄立方体を往復
「点群を geometry morph（球⇄立方体をmixで補間）させて」
縁だけが光る質感（フレネル）。視線に対して斜めの面ほど発光する。走査線を足すとホログラム/SF感。
// 視線と法線の角度で"縁の光り"を作る＝フレネル float fres = pow(1.0 - max(dot(normal, viewDir), 0.0), 2.4); float scan = 0.5 + 0.5*sin(gl_FragCoord.y*0.14 - uTime*3.0); // 走査線 col = base*(0.3 + fres*1.3) * (0.75 + 0.25*scan); // 縁＋ホログラム
「フレネルのリム発光＋走査線でホログラム風（加算合成）にして」
画像の上でカーソルを動かすと、そこから波紋が広がって画像が歪む。縁が少しRGBずれして"濡れた"質感に。（枠内でマウス）
// マウスからの距離で波紋を作り、その分だけ画像UVをずらす vec2 d = uv - uMouse; float dist = length(d); float rip = sin(dist*24.0 - uTime*4.0) * exp(-dist*4.5) * 0.035 * uHover; uv += normalize(d) * rip; // ← 画像が波打つ // R/G/B を少しずらしてサンプル＝色収差で"濡れ"感
「画像に ripple/displacement ホバー（カーソルから波紋・軽いRGBずれ）を」
描いた3Dを最後にドット絵化＋色数を落とす。ポストエフェクトの応用（bloomと同じ仕組みで自作シェーダを1枚差すだけ）。
import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
composer.addPass(new RenderPass(scene, cam));
composer.addPass(new ShaderPass({ uniforms:{tDiffuse:{value:null}, uCells:{value:70}},
fragmentShader:`vec2 uv=(floor(vUv*uCells)+0.5)/uCells; // 格子に丸めてドット化
c.rgb=floor(c.rgb*6.0)/6.0;`})); // 色数も6段に
「ShaderPassでピクセル化（UVを格子に丸める＋色を6段に量子化）」
漂う点どうしを、近いものだけ線で繋ぐ。テック感・つながりの表現の定番。点(Points)＋線(LineSegments)の合わせ技。
// 毎フレーム、全ペアの距離を見て「近い2点」だけ線を張る
for(i,j) if(dist(p[i],p[j]) < 1.5){ push(p[i]); push(p[j]); }
lineGeo.setDrawRange(0, count); // LineSegments を張り替え
「particle network（線で繋ぐ星座）を背景に。近い点だけLineSegmentsで接続」
背後を歪ませて透ける本物のガラス質感。MeshPhysicalMaterialのtransmission＋環境マップで屈折・反射。
new THREE.MeshPhysicalMaterial({
transmission:1.0, // 透過（背後が透ける）
ior:1.35, thickness:1.4, roughness:0.06, // 屈折率・厚み・つるつる
clearcoat:1.0, envMap:env }); // 環境マップで反射
「transmissionのガラス質感（背後が屈折して透ける・envMapで反射）にして」
周囲を映し込む鏡面金属。環境マップ(envMap)を metalness=1・roughness≈0 のマテリアルに与えるだけ。高級感の定番。
new THREE.MeshStandardMaterial({
metalness:1.0, roughness:0.08, // 金属・つるつる＝鏡面
envMap:env, envMapIntensity:1.3 }); // envMapを映し込む（PMREMで生成可）
「envMapのクロム金属（metalness=1・roughness≈0で周囲を映す）にして」
画像やロゴの画素を点に変換し、バラけては再び像を結ぶ。制作会社サイトの"ロゴが粒子から現れる"演出。
// 画像の明るい画素→点の座標に。散り位置(aScatter)も持たせておく vec3 p = mix(aScatter, position, uProg); // uProg 0→1 で 散り→像 // uProg = 0.5 + 0.5*sin(time) で 集合⇄拡散を往復。色は画素からaColorへ
「画像→粒子（image to particles）で、ロゴが粒子から集合して現れるように」
1枚の画像＋深度マップ(白=手前/黒=奥)で、マウスに合わせて奥行きがずれる"2.5D"。手前ほど大きく動く。（枠内でマウス）
float depth = texture2D(uDepth, uv).r; // 白=手前 / 黒=奥 vec2 par = (uMouse-0.5) * (depth-0.4) * 0.14; // 深さで視差量を変える color = texture2D(uColor, uv + par); // ← 手前ほど大きくずれる
「depth-map parallax（2.5D）で、写真＋深度マップをマウス視差で立体的に」
マウスから光線を飛ばし、当たった立体だけを反応させる。3Dのボタン/選択の基礎。（枠内でマウスを乗せると持ち上がる）
raycaster.setFromCamera(pointer, cam); // マウス→光線 const hit = raycaster.intersectObjects(boxes)[0]; // 最初に当たった立体 if(hit) hit.object.scale.setScalar(1.5); // 当たったものだけ反応
「Raycasterでホバー選択（当たった3Dだけ持ち上げて発光）」
描いた映像を、時々ザッと乱れさせるノイズ/RGBずれ。bloomと同じポスト処理で、addonのGlitchPassを差すだけ。サイバー/故障演出。
import {GlitchPass} from 'three/addons/postprocessing/GlitchPass.js';
composer.addPass(new RenderPass(scene, cam));
composer.addPass(new GlitchPass()); // 時々ザッと乱れる（.goWild=true で常時暴走）
「GlitchPassでグリッチ（時々ノイズとRGBずれで乱れる）」
2つの物質が反応・拡散し、生き物の模様(斑点・迷路)が"育つ"。前フレームの状態をテクスチャに保存して更新するFBOピンポン＝本物のGPGPU。時間とともに模様が変化します。
// 2枚のRenderTargetを交互に使い、前の状態から次の状態を計算（ピンポン） renderer.setRenderTarget(rtB); renderer.render(simScene, cam); // simが前状態(rtA)を読む [rtA, rtB] = [rtB, rtA]; // 入れ替え→次フレームへ // シェーダ内: a += Da*Lap(a) - a*b*b + feed*(1-a); b += Db*Lap(b) + a*b*b - (kill+feed)*b;
「reaction-diffusion（Gray-Scott）をFBOピンポンで本物のシミュとして。模様が育つ背景に」
重力・衝突・跳ね返りを物理エンジンで計算し、3Dに反映。積み上げ・崩し・投げ。枠内クリックで投げ上げ。
import * as CANNON from 'cannon-es';
const world = new CANNON.World({gravity:new CANNON.Vec3(0,-9.82,0)});
world.addBody(box); // 質量・形状を持つ剛体
loop(){ world.step(1/60); // 物理を1コマ進める
mesh.position.copy(box.position); mesh.quaternion.copy(box.quaternion); } // 3Dに反映
「cannon-esの物理エンジンで箱が落ちて積み上がる（クリックで投げ上げ）ように」
どれだけ寄ってもフチが綺麗な3D文字。距離場(MSDF)方式。troika-three-textで手軽に。寄り引きしてもボケません。
import {Text} from 'troika-three-text';
const t = new Text(); t.text='LITTECH'; t.fontSize=1.1; t.color=0xC6F24E;
t.anchorX='center'; t.anchorY='middle'; t.sync(); // MSDF＝拡大してもフチがくっきり
scene.add(t);
「troika-three-textでMSDF文字（寄ってもボケない3Dテキスト）を」
物体表面を無数の点で表す"点群"。スキャン線が上下に走り、通った所が光る。3Dスキャン/計測の表現。
// 表面の頂点を"点"として描き、スキャン線(uScan)に近い点を明るく＆大きく float band = 1.0 - smoothstep(0.0, 0.45, abs(position.y - uScan)); gl_PointSize = size * (1.0 + band*1.6); // uScanを上下に動かせばスキャン演出
「point cloud（LiDAR風・スキャン線が走る）で物体を点群表示に」
数万の粒子の位置をテクスチャに保存し、GPUだけで毎フレーム更新。CPUを使わず大量の粒子を流し続ける真のGPGPU。
// 位置テクスチャ(rtA)を読み→流し→書き(rtB)→入れ替え（16,384粒子） sim: p += curl(p)*0.012; if(life<=0) respawn(); gl_FragColor=vec4(p,life); // 描画: 各点は aRef(uv) で位置テクスチャを読み、そこに点を打つ（CPU計算ゼロ）
「GPGPUパーティクル（位置をFBOに保存してGPUで更新）で数万粒子を流して」
陰影をなめらかでなく"数段"に区切り、輪郭線を付けてアニメ/漫画風に。MeshToonMaterial＋階調マップ＋アウトライン。
const ramp = 4段のグレー(NearestFilter); // 陰影を4段に量子化
new THREE.MeshToonMaterial({color, gradientMap:ramp});
// 輪郭線＝同じ形を黒・BackSideで少し大きく重ねる（outline.scale *= 1.045）
「MeshToonMaterialでセルシェード＋輪郭線（漫画風）にして」
"光の当たった球"の画像1枚で質感を表現。ライト計算なしで金属・粘土・陶器などを高速に。MeshMatcapMaterial。
// matcap = 球にライティングした1枚絵。法線の向きでその絵を貼るだけ＝ライト不要で軽い
new THREE.MeshMatcapMaterial({ matcap: matcapTexture });
「MeshMatcapMaterialで（ライト無しの）金属/粘土っぽい質感を」
床が周囲を映し込む鏡面反射。シーンをもう一度その面から描いて反射画像を作る。Reflectorアドオン。
import {Reflector} from 'three/addons/objects/Reflector.js';
const mirror = new Reflector(new THREE.CircleGeometry(3.2,64), {textureWidth:512,textureHeight:512});
mirror.rotation.x = -Math.PI/2; scene.add(mirror); // 面から見たシーンを描いて反射
「Reflectorで鏡面反射の床（上の物体が映り込む水面）を」
光源から見た深度を1枚描き、影を落とす本物の影。castShadow / receiveShadow。立体感が一気に増す。
renderer.shadowMap.enabled = true; // 影を有効化 light.castShadow = true; // この光が影を作る box.castShadow = true; floor.receiveShadow = true; // 落とす側 / 受ける側
「shadowMapでリアルタイム影（castShadow/receiveShadow）を落として」
数式だけで無限に細かい3D立体を描く。ジオメトリ無し・レイマーチで距離を測りながら回り込む。WebGLの極み。
// Mandelbulbの距離推定(DE)を各ピクセルで評価→光線を進めて表面を探す
for(i){ z = pow(z,8.0) + pos; ... } return 0.5*log(r)*r/dr; // 距離推定
for(i){ d = de(ro+rd*t); if(d<0.001) break; t += d; } // レイマーチ
「Mandelbulbを距離推定でレイマーチ（数式だけの無限3Dフラクタル）を」
モデルに内蔵された動き（歩く/走る等）を再生。AnimationMixerでgltf.animationsを流すだけ。※動きが入っていないモデルは再生できません。
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction( gltf.animations[0] ).play(); // ファイル内蔵のモーションを再生
loop(){ mixer.update(delta); } // 毎フレーム進める（delta秒）
「glTFの内蔵アニメをAnimationMixerで再生（歩く/走る等）」
好きなPNG/JPGを点に変換し、散らして→元の絵に戻す。枠に画像をドロップ、または下のボタンで選択すると差し替わります（透過PNG推奨）。
// 画像を裏で縮小→getImageData→明るい/不透明な画素だけ点にする（色も引き継ぐ） const d = ctx.getImageData(0,0,w,h).data; // ※他ドメインの画像はCORSで読めない if(d[i*4+3] > 60) addParticle(x, y, color); // アルファのある所だけ粒子化
「任意の画像をgetImageDataで粒子化（不透明部分だけ・元色つき・集合⇄拡散）」
読み込んだ3Dモデルの表面を点で埋め（MeshSurfaceSampler）、散らして→立体を結ぶ。平面画像より奥行きが出る演出。
import {MeshSurfaceSampler} from 'three/addons/math/MeshSurfaceSampler.js';
const sampler = new MeshSurfaceSampler(mesh).build();
for(k){ sampler.sample(pos); target[k]=pos; } // 表面に点を均等散布→集合先に
// vec3 p = mix(scatter, target, uProg); で 散り→モデル形へ
「glTFの表面をMeshSurfaceSamplerで点群化して、粒子から集合させて」
常時ゆっくり動く背景。ヒーローやセクションの奥に敷く。
ぼかした光の塊がゆっくり漂う。上品な"動く背景"の定番。
.blob{filter:blur(42px);background:radial-gradient(circle,#59E6D3,transparent 60%)}
@keyframes aur{to{transform:translate(28%,12%) scale(1.35)}} /* 数個を別速度で漂わせる */
「aurora背景（ぼかした radial を3つゆっくり漂わせる）」
点の格子の上を光がゆっくり移動。テック感のある背景。
background-image:radial-gradient(#fff2 1.5px,transparent 1.6px);background-size:22px 22px; /* 上を .glow（radial-gradient）が transform でゆっくり移動 */
「dot grid（点の格子）＋移動する glow を背景に」
複数色のグラデが混ざり合ってゆっくり動く。今どきの背景。
background:radial-gradient(at 20% 30%,#59E6D3,transparent 50%), radial-gradient(at 80% 20%,#C6F24E,transparent 50%),radial-gradient(at 50% 85%,#FF7A59,transparent 50%); background-size:200% 200%;animation:meshmv 10s ease-in-out infinite alternate; /* position を動かす */
「mesh gradient（radial複数＋background-position を動かす）」
待ち時間の見せ方。
回転するリング。最も基本の読み込み表示。
.spin{border:4px solid #333;border-top-color:#C6F24E;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
「spinner（リング・上だけ色・回転）を読み込み表示に」
中身の代わりに"光が流れる灰色バー"。読み込み中の枠。
.bar{background:linear-gradient(90deg,#1B2029 25%,#2E3540 50%,#1B2029 75%);background-size:200% 100%;
animation:shim 1.4s linear infinite} @keyframes shim{to{background-position:-200% 0}}
「skeleton（shimmer）で読み込み中の枠を光が流れるように」
3つの点が順に跳ねる。軽い"考え中"表示。
.dot{animation:bnc 1.1s ease-in-out infinite} .dot:nth-child(2){animation-delay:.15s} /* stagger */
@keyframes bnc{50%{transform:translateY(-14px)}}
「bouncing dots（3点を時間差で跳ねさせる）を待機表示に」
マウスカーソル自体を作り替える。サイトの個性が出る（デモは枠内でカーソル置換）。
小さな点＋遅れて追う輪。カーソルを置き換える定番。
// dot は即・ring は lerp で遅れて追う（cursor:none で標準カーソルを消す） ring.x += (mouse.x - ring.x) * 0.14; // 遅延の"タメ"が気持ちよさ
「trailing cursor（点＋遅れて追う輪・標準カーソルは消す）」
要素に乗るとカーソルが大きく＋反転合成。リンクの合図に。
.cur{mix-blend-mode:difference;transition:width .2s,height .2s}
link.onmouseenter = ()=> { cur.style.width = cur.style.height = '60px'; } // ホバーで拡大
「grow-on-hover カーソル（リンクで拡大・mix-blend-mode:difference）」
速度と復元力で"手触り"を出す。名前でなく数値の妙（＝つまみが効く）。
マウスへ、行き過ぎて戻る"バネ"で追う。lerpより生きた動き。
// バネ: 速度に復元力を足し、減衰させる vx = (vx + (target - x) * k) * damping; x += vx; // k=硬さ, damping=0.78
「spring follow（バネでマウス追従・行き過ぎて戻る）」
掴んで動かし、離すとビヨンと元へ戻る。
// 離したら原点(0,0)へバネで戻す
if(!down){ vx = (vx - x*0.12) * 0.82; x += vx; } // オーバーシュートしながら復帰
「elastic drag（ドラッグ→離すとバネで戻る）」
図形そのものを別の図形へ変える。
図形が別の図形へなめらかに変形し続ける。ロゴやアイコンの変身に。
<path d="A"><animate attributeName="d" dur="4s" repeatCount="indefinite" values="A;B;A"/></path> <!-- A と B は同じ命令構成のパスにする（点数を合わせる） -->
「SVG path morph（SMILで d を A→B に変形、点数を揃える）」
Animate.css / Hover.css で有名な"名前で通じる"動きと、スクロール駆動・gooey等のモダン手法。ボタンで切替・クリックで再生。
要素を一瞬強調する定番。名前で指示が通る（例：「shakeさせて」）。ボタンを押すと再生。
@keyframes shake{10%,30%,50%,70%,90%{transform:translateX(-9px)}20%,40%,60%,80%{transform:translateX(9px)}}
.el.play{animation:shake .8s} /* クラスを付けた瞬間に1回再生（終わったら外す） */
「attention seekers の shake（Animate.css相当）を、クリックで1回再生させて」
要素が画面に"出てくる"見せ方。リビールの語彙。ボタンで各種を再生。
@keyframes zoomIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.el{animation:zoomIn .6s both} /* IntersectionObserverで画面入りに合わせて発火が定番 */
「entrance の zoomIn（画面に入ったら発火）で登場させて」
ボタン/リンクの定番ホバー。名前で通じる（grow / push / underline 等）。各チップに乗せて確認。
.grow{transition:transform .3s}.grow:hover{transform:scale(1.16)}
.uL::after{content:"";position:absolute;left:0;bottom:6px;height:2px;width:100%;
background:currentColor;transform:scaleX(0);transform-origin:left;transition:.3s}
.uL:hover::after{transform:scaleX(1)} /* 下線が左から伸びる */
「Hover.css の grow / underline-from-left をボタンに付けて」
ランダムな記号がパラパラ変わり、正しい文字へ"解読"されていく。ハッカー/未来感の定番。
// 各文字を、確定するまでランダムな記号で回し続ける
frame(){ out = target.split('').map((ch,i)=> i<progress ? ch : randChar()).join(''); }
// progress を時間で increment → 左から順に"解読"されていく
「text scramble（decode）で、ランダム文字から単語に解読される演出を」
文字の中をグラデーションが流れ続ける。background-clip:text＋位置アニメ。見出しの定番。
.g{background:linear-gradient(90deg,#59E6D3,#C6F24E,#FF7A59,#59E6D3);background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 4s linear infinite}
@keyframes sweep{to{background-position:300% 0}}
「animated gradient text（文字の中をグラデが流れる）で見出しを」
スクロールが速いほど要素が傾き、止まると戻る。"勢い"を可視化するawardサイト定番。枠の中をスクロール。
let last=0, skew=0;
onScroll(){ const v = scrollTop - last; last = scrollTop; skew = clamp(v*0.4, -20, 20); }
raf(){ skew *= 0.85; items.style.transform = `skewY(${skew}deg)`; } // 速度で傾け→0へ戻す
「scroll-velocity skew（スクロール速度で要素をskewYし、止まると戻す）」
JS無しで、スクロール位置に完全連動。animation-timeline: view()で「画面に入る量」に合わせて再生。枠の中をスクロール。
.item{animation:reveal linear both; animation-timeline:view();
animation-range:entry 0% cover 45%;} /* 画面に入る間だけ再生。JS不要・カクつかない */
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
「CSSのscroll-driven（animation-timeline:view()）でJS無しのスクロール出現を」
横スクロールで各パネルがピタッと吸着して止まる。CSSだけのカルーセル。枠の中を横スクロール。
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
.gallery>.panel{flex:0 0 72%;scroll-snap-align:center} /* 各パネルが中央で吸着 */
「scroll-snap（x mandatory・center）の横カルーセルにして」
カーソルを動かすと、画像が軌跡のように連なって消えていく。Codrops定番の"手触り"。（枠内でマウス）
onMouseMove(e){ if(dist(last,e) < 40) return; // 一定距離動くごとに1枚
const img = spawnImageAt(e.x, e.y); // 画像を置く
animate(img, {opacity:[1,0], scale:[1,.6]}, 700).then(()=>img.remove()); }
「image trail（カーソル追従で画像が連なって消える）を」
白い丸が乗った所だけ色が反転する、おしゃれ系の定番カーソル。mix-blend-mode:difference。（枠内でマウス）
.cursor{position:fixed;width:90px;height:90px;border-radius:50%;background:#fff;
mix-blend-mode:difference;pointer-events:none} /* 重なった色を反転 */
onMouseMove(e){ cursor.style.transform=`translate(${e.x}px,${e.y}px)` }
「mix-blend-mode:difference の追従カーソル（乗った所が反転）を」
近づくと粘性のある液体のように繋がる。SVGフィルタ（ぼかし→しきい値）で作る。メニュー展開の定番。
<filter id="goo"><feGaussianBlur stdDeviation="7" result="b"/>
<feColorMatrix in="b" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9"/></filter>
.wrap{filter:url(#goo)} /* 中の丸が近づくと"ぬめっと"繋がる */
「gooey（feGaussianBlur＋feColorMatrixのしきい値）で液体的に繋がるメニューを」
画面全体に走る細かいノイズ。フィルム/高級感を足す薄いレイヤー。feTurbulenceを動かす。
/* feTurbulenceで作ったノイズ画像を全面に薄く敷き、位置をstepsで動かす */
.grain::after{content:"";position:absolute;inset:-60%;background:url("data:...feTurbulence...");
opacity:.55;animation:grain .5s steps(5) infinite} /* パラパラ動いて"ざらつき" */
「animated film grain（feTurbulence）を全面に薄く重ねて質感を」
クリックした所から色とりどりの紙片が飛び散り、重力で落ちる。完了/お祝いの演出。（枠内をクリック）
for(let i=0;i<80;i++){ const p={x,y, vx:rand(-6,6), vy:rand(-14,-4), rot:rand(360)}; }
tick(){ p.vy += 0.4; p.x+=p.vx; p.y+=p.vy; // 重力で落下
el.style.transform=`translate(${p.x}px,${p.y}px) rotate(${p.rot}deg)`; }
「confetti burst（クリック地点から紙片が飛んで重力で落ちる）を成功時に」
まだ珍しい/最新の技術。WebGPU・CSS Houdini・View Transitions・Lottie・Web Audio・可変フォント等。一部は最新ブラウザ(Chrome/Edge)で表示。
WebGLの後継。描画も計算もより低レベルで高速。ここではWGSLシェーダで全画面プラズマ。Chrome/Edge 113+ で表示。
const ctx = canvas.getContext('webgpu'); ctx.configure({device, format});
// WGSL: @vertex で全画面三角形、@fragment で色を計算
pass.setPipeline(pipe); pass.draw(3); device.queue.submit([enc.finish()]);
「WebGPU（WGSL）で全画面シェーダを（WebGLでなく次世代APIで）」
JSで描いた絵をbackgroundに使えるCSS拡張。生成的な背景をCSSの1プロパティで。Chromium系で表示。
CSS.paintWorklet.addModule(url); // registerPaint('mlab', class{ paint(ctx,size,props){...} })
.box{ background: paint(mlab); --t:0 } // --t を動かすと再描画＝アニメ
「CSS Houdini の Paint Worklet（paint()）で生成背景を」
DOMを変えるだけで前後の見た目を自動で"間"を繋いでモーフ。並べ替え・ページ遷移が滑らかに。ボタンで並べ替え。
el.style.viewTransitionName = 'card1'; // 同名の要素どうしを繋ぐ
document.startViewTransition(() => { /* DOMを並べ替え */ }); // 前後を自動でモーフ
「View Transitions APIで共有要素モーフ（並べ替え/遷移を滑らかに）」
要素を指定した曲線の上を走らせる。offset-path＋offset-distanceのCSSだけ。乗り物・矢印・軌道に。
.el{ offset-path: path('M 60 230 C 200 40, 540 40, 680 230');
offset-rotate: auto; animation: run 5s infinite }
@keyframes run{ to{ offset-distance:100% } } /* 曲線上を進む＋進行方向へ回転 */
「offset-path で曲線に沿って移動（offset-distanceをアニメ）」
デザイナーがAfter Effectsで作った動きをJSON化して再生。軽量ベクターで綺麗に。アイコン/イラストの定番（兄弟にRive）。
import lottie from 'lottie-web';
lottie.loadAnimation({ container, renderer:'svg', loop:true, autoplay:true,
animationData: json }); // AEから書き出したJSONを再生（外部ツール連携）
「Lottie（lottie-web）でAEアニメJSONを再生して」
音の周波数を解析して映像を動かす。ここでは音を生成→棒が踊る。ボタンで音ON（小さめの音が鳴ります）。
const an = ctx.createAnalyser(); an.fftSize=128; source.connect(an);
an.getByteFrequencyData(data); // 周波数ごとの強さ
bars[i].style.transform = `scaleY(${data[i]/255})`; // 音に合わせて棒が伸縮
「Web AudioのAnalyserで音に反応（周波数で棒/粒子を動かす）」
1つのフォントで太さや幅を無段階に変えられる。font-weight / font-variation-settingsをアニメ。見出しの表情付けに。
@font-face{font-family:Inter;src:url(inter-variable.woff2);font-weight:100 900}
.t{font-weight:100; animation:w 2.6s infinite alternate}
@keyframes w{ to{ font-weight:900 } } /* 100→900 を無段階に補間（可変フォントゆえ滑らか） */
「可変フォントの font-weight/variation を animationで太さを揺らして」
1項目＝1つの <article class="entry">。下のテンプレをコピーして5か所を書き換えるだけ。
①用語 ②意味 ③デモ（.stage の中身） ④コード ⑤指示例 — の5つを埋めれば1項目が増えます。タグは css／js／gl。
<a href="#新id">…</a> を1行足すapp.js に数行（既存デモが参考）<article class="entry" id="新id">
<header><div>
<h3>用語 <span class="en">english</span></h3>
<p class="mean">この動き/形が何か、1〜2行で。</p>
</div><span class="tag css">CSS</span></header>
<div class="stage">（ここにデモのHTML）</div>
<div class="foot">
<div class="codehead"><span class="t">CSS</span><button class="copy">コピー</button></div>
<pre class="code">（そのまま貼れるコード）</pre>
<div class="tell"><div class="l">指示例</div>
<p>「〜のように<code>◯◯</code>して」</p></div>
</div>
</article>
ここに無い動きも作れます。「こういう動きにしたい」とお伝えいただければ、同じ形で足していきます。