GSAP Timeline & Scroll Story Studio：動きを設計・検証・出力
GSAP TimelineとScrollTriggerの時間軸・スクロール軸を同じAnimation Projectで可視化し、position parameter、label、callback、stagger、pin、scrub、reduced motionを検証して9形式へ出力します。
ARCHIVE
使用技術: HTML
backdrop-filterエディター
ガラス表現などの背面filterを編集し、背景、透明度、fallback、ブラウザ対応を同時に確認します。
レスポンシブ・レイアウトStudio
Flexbox、Grid、Subgrid、Container Queries、clamp()を、3つの画面幅とresize canvasで設計します。
GSAP Timeline & Scroll Story Studio: Design, validate, and export motion
Design GSAP timelines and ScrollTrigger stories in one Animation Project, validate position parameters, labels, callbacks, stagger, pin, scrub, and reduced motion, then export nine implementation formats.
CSS Backdrop Filter Editor
Edit glass-like backdrop effects while checking backgrounds, opacity, fallbacks, and browser support.
Responsive Layout Studio
Design Flexbox, Grid, Subgrid, Container Queries, and clamp() layouts across three viewport previews.
Accessibility Studio：WCAG 2.2の検査・修正・手動確認
HTMLとCSSをブラウザ内の隔離環境で解析し、WCAG 2.2 Level A・AAを基準に、証拠付きの指摘、安全な修正候補、人が確認する項目、再監査、12形式のレポートを1つのAudit Projectで管理します。
CSS三角形・Shapeジェネレーター
360度の三角形をborder方式とclip-path方式で作り、吹き出し、矢印、装飾用HTMLを出力します。
In-viewアニメーションビルダー
Intersection Observerで表示領域への進入を検知し、方向、距離、threshold、rootMargin、staggerを調整します。
Accessibility Studio: Audit, remediate, and document WCAG 2.2 checks
Audit HTML and CSS in an isolated local workspace, separate automated, assisted, and manual WCAG 2.2 A/AA checks, apply reversible safe candidates, re-audit, and export twelve evidence-aware formats.
CSS Triangle and Shape Generator
Create 360-degree triangles with border or clip-path techniques and export markup for arrows, callouts, and decoration.
In-view Animation Builder
Build Intersection Observer reveals with direction, distance, threshold, root margin, stagger, and cleanup.
CSSグラデーションジェネレーター
80種類以上のRecipeから選び、複数レイヤー、色停止点、linear・radial・conic・repeatingを視覚的に編集します。
CSS Transform 2D・3D Studio
translate、rotate、scale、skew、origin、perspectiveを編集し、適用順とXYZ軸を確認します。
GSAP ScrollTriggerビルダー
start、end、scrub、pin、stagger、markersを視覚的に調整し、npm版とscript版のコードを生成します。
CSS Gradient Generator
Edit multiple layers, color stops, linear, radial, conic, and repeating gradients from more than 80 recipes.
CSS Transform 2D and 3D Studio
Edit translate, rotate, scale, skew, origin, and perspective while inspecting transform order and XYZ axes.
GSAP ScrollTrigger Builder
Configure start, end, scrub, pin, stagger, and markers visually, then export npm and script versions.
CSSボタンビルダー
30種類以上のRecipeを基に、背景、枠、影、変形、hover、focus、active、disabled、スマートフォン幅を編集します。
CSS Transition・Easingシミュレーター
36種類以上のeasing、cubic-bezier、時間、遅延、再生、逆再生、速度、任意位置を比較します。
CSS Scroll-driven Animationビルダー
scroll()・view() timelineでスクロール連動アニメーションを作り、fallbackと対応状況を確認します。
CSS Button Builder
Customize backgrounds, borders, shadows, transforms, hover, focus, active, disabled, and mobile width from more than 30 recipes.
CSS Transition and Easing Simulator
Compare more than 36 easings with cubic-bezier controls, duration, delay, playback, reverse, speed, and scrubbing.
CSS Scroll-driven Animation Builder
Build scroll-linked animations with scroll() and view() timelines, including fallbacks and support checks.
box-shadowレイヤーエディター
複数の外側・内側shadowを追加、複製、無効化、並び替えし、カードやボタン用の影を作ります。
CSS Keyframes Animation Studio
複数keyframeと要素trackを編集し、loop、alternate、delay、fill-mode、reduced motionを含むコードを作ります。
WordPressおすすめCSS Studio
見出し、ボタン、画像、表、引用などを選び、追加CSSからtheme.jsonまで6種類の実装方法へ変換します。
CSS Box Shadow Layer Editor
Add, duplicate, disable, and reorder multiple outer and inset shadows for cards and buttons.
CSS Keyframes Animation Studio
Edit multiple keyframes and element tracks with loop, alternate, delay, fill mode, and reduced-motion output.
WordPress CSS Studio
Style headings, buttons, images, tables, and quotes, then export six WordPress implementation formats.