01 — A video hero for WordPressWordPress 用の動画ヒーロー
This page is the plugin, running. Keep scrolling.このページが、プラグインの実物。そのままスクロールを。
02 — Any clipどんな動画でも
Drop a clip in — scrolling becomes the playback.動画を置くだけで、スクロールがそのまま再生に。
03 — Free on WordPress.orgWordPress.org で無料
Scroll on — this frame breaks like glass.このまま送ると、この画面はガラスのように割れます。
GENE Scroll Hero puts a full-screen image or video behind your headline. When it's a video, the page pins the hero and plays the clip frame by frame as the visitor scrolls — so scrolling is the playback. It's one native WordPress block with zero external libraries, so it stays fast and never breaks your layout. The hero you just scrolled at the top is the real block — no mock-up. GENE Scroll Hero は、見出しの背景に画像や動画を全画面で敷けます。動画なら、ヒーローをピン留めしてスクロールに合わせて1コマずつ再生＝スクロールがそのまま再生になります。中身は素の WordPress ブロック1つで外部ライブラリはゼロ。軽く、レイアウトを崩しません。今スクロールしたトップのヒーローが実物です — モックではありません。
The hero below chains three clips: each chapter's video plays frame by frame, then its last frame breaks apart to reveal the next — and watch the headline move too, since each chapter can place it somewhere new. The glass break you saw at the top of this page is free — chapters are Pro. Same shipping code; with no JavaScript, reduced-motion, or a theme that can't pin, it falls back to a clean looping-video hero. 下のヒーローは3本のクリップを連結します。各章の動画が1コマずつ再生し、最後のフレームが割れて次章が現れます。見出しの位置にも注目 — 章ごとに好きな場所へ置けます。ページ冒頭で見たガラス割れは無料。この章立ては Pro です。同じ出荷コードで、JavaScript 無効・視差軽減・ピンできないテーマでは、ループ動画ヒーローにフォールバックします。
↓ Keep scrolling — the hero holds and playsそのままスクロール — ヒーローは留まって再生します
01 — First impression第一印象
The first three seconds decide everything.最初の3秒が、すべてを決める。
02 — Productsプロダクト
Chapter two — and the headline moved with it.第2章 — 見出しの位置も、章ごとに。
03 — Impactインパクト
Every clip plays as visitors scroll.どのクリップも、スクロールで再生。
No jQuery, no GSAP, no ScrollTrigger. Nothing loads from a third-party CDN; every line ships inside the plugin. Faster, safer, and it won't break when someone else's CDN goes down.jQuery も GSAP も ScrollTrigger も不使用。外部CDNから一切読み込まず、全コードをプラグイン内に同梱しています。速くて安全、他社のCDNが落ちても壊れません。
Long text, huge or oddly-shaped images, narrow phones: the layout holds. If an effect isn't supported, or a visitor prefers reduced motion, the block falls back to a clean static state. The page never gains a sideways scrollbar.長文でも、巨大な画像や変形した画像でも、狭いスマホでも、レイアウトは保たれます。非対応環境や「視差効果を減らす」設定では、きれいな静止状態にフォールバック。横スクロールバーは出ません。
CSS-native where the browser supports scroll-driven animation; a tiny, self-contained JavaScript fallback everywhere else. Either way, it moves.対応ブラウザはCSSネイティブで、それ以外は自前同梱の軽量JSが動かします。どちらの環境でも動きます。
The page scrolls normally; the effects just follow along. Better for accessibility, and no motion sickness.ページは普通にスクロールでき、演出はそれに追従するだけ。アクセシビリティにも優しく、酔いません。
They live in the block editor like any core block. Deactivate the plugin and your content stays; there's no page-builder lock-in.コアブロックと同じようにブロックエディタで扱えます。プラグインを停止しても中身は残るので、ページビルダーのようなロックインがありません。
Each block's small script and styles load only on the pages that actually use it, so the rest of your site stays as light as ever.各ブロックの小さなスクリプトとCSSは、実際に使ったページだけで読み込まれます。サイトの他の部分は軽いままです。
Install GENE Scroll Hero (free on WordPress.org), or activate your Pro license for the full set.GENE Scroll Hero（WordPress.org で無料）をインストール。フル機能は Pro ライセンスを有効化。
In any page, open the inserter and add “Scroll Hero” from the GENE Motion category. Pick a background image or video, and write your headline.任意のページでインサーターを開き、「GENE Motion」カテゴリの「Scroll Hero」を追加。背景の画像/動画を選んで、見出しを書くだけ。
That's it. The effect runs on the front end, only on the pages that use it.以上。演出はフロントで、使ったページだけで動きます。
| Typical motion plugins一般的な演出プラグイン | GENE Scroll Hero | |
|---|---|---|
| External libraries外部ライブラリ | jQuery + GSAP + ScrollTrigger | Noneなし |
| Loaded from a CDNCDN読込 | Oftenよくある | Never (self-hosted)なし（自前同梱） |
| Scroll hijackingスクロールジャック | Commonよくある | Noなし |
| Reduced-motion support視差軽減対応 | Sometimes時々 | Always常に対応 |
| Breaks on long content長文で崩れる | Sometimes時々 | Never崩れない |
| Output出力 | Shortcodes / page builderショートコード / ページビルダー | Native WordPress blocks素のWordPressブロック |
The free plugin on WordPress.org gives you the full Scroll Hero: an image or video background, the scroll-scrubbed video, one headline over it, the glass-shatter finale, well-tuned defaults, and your own heading and button colors. Pro adds multiple headlines you place anywhere on a scroll timeline, chapters that chain several videos with a break-apart handoff, a separate lighter video for phones, break style and length, font and button-shape choices, and priority support.WordPress.org の無料版で Scroll Hero をフルに使えます（画像/動画の背景・スクロールで再生する動画・その上に見出し1つ・ガラス割れフィナーレ・よく調整された既定・見出しとボタンの色も自由に）。Pro は、スクロールタイムライン上に自由配置できる複数見出し・動画を割れで引き継ぐ章立て・スマホ用の軽い別動画・割れスタイルと長さ・フォントやボタンの形の変更・優先サポートを追加します。
| Free · WordPress.org無料 · WordPress.org | Pro | |
|---|---|---|
| Image or video background画像・動画の背景 | ✓ | ✓ |
| Video plays as you scroll (scrub)スクロールで動画再生（スクラブ） | ✓ | ✓ |
| Dim overlay & one headline暗幕＋見出し1つ | ✓ | ✓ |
| Glass-shatter finaleガラス割れフィナーレ | ✓ | ✓ |
| Multiple headlines that swap on scrollスクロールで次々swapする複数見出し | — | ✓ |
| Free-placement headline timeline (drag & time)見出しの自由配置タイムライン（ドラッグ＋タイミング） | — | ✓ |
| Chapters — chain videos with a break-apart handoff章立て — 割れで引き継ぐ動画の連結 | — | ✓ |
| Separate lighter portrait video for phonesスマホ用の軽い縦動画 | — | ✓ |
| Break style & length (glass / split)割れスタイル・長さ（glass / split） | — | ✓ |
| Fine scroll-length controlスクロール長の微調整 | — | ✓ |
| Heading & button colors見出し・ボタンの色 | ✓ | ✓ |
| Font choices & button shapesフォントの変更・ボタンの形 | — | ✓ |
| Never-break fallbacks崩れないフォールバック | ✓ | ✓ |
| Supportサポート | Communityコミュニティ | Priority email優先メール |
| Price価格 | Free無料 | $69/yr ($29 first year with a Discord coupon)$69/年（Discordのクーポンで初年 $29） |
Buy and start instantly. Pro is $69/year, or $29 your first year with a coupon from our Discord.購入後すぐ使えます。Pro は $69/年。Discord のクーポンで初年は $29 になります。
$69 / year · $29 first year with a coupon from our Discord$69/年 · Discord のクーポンで初年 $29
For owners and freelancers building a cinematic hero on their own site.自分のサイトにシネマティックなヒーローを作るオーナー・フリーランス向け。
For anyone shipping motion across several sites.複数サイトに演出を入れる方向け。
Get the $29 first-year coupon on DiscordDiscord で初年 $29 クーポンを受け取る
Try it free on WordPress.org · cancel renewal anytime · Secure payment via FreemiusWordPress.org で無料で試せる · 更新はいつでも解約可 · Freemius の安全な決済
No. There are no libraries and nothing loads from a CDN; a block's small code only loads on pages that use it.なりません。ライブラリゼロ・CDN読込なし。各ブロックの小さなコードは、使ったページだけで読み込まれます。
Yes. The pin and the video scrub use standard CSS and a tiny self-contained script, so they work in every modern browser, including on phones. Where the hero can't pin — no JavaScript, reduced-motion, or a theme whose layout would break a pinned section — it falls back to a clean looping-video hero with your headline shown. It never leaves a broken pin.はい。ピンと動画スクラブは標準CSS＋自前の軽量スクリプトで、スマホを含むどのモダンブラウザでも動きます。ピンできない環境（JavaScript 無効・視差軽減・ピンを壊すテーマ）では、見出しを表示したままループ動画ヒーローにフォールバック。崩れたピンは絶対に残しません。
Scrubbing can only jump to a video's keyframes, so a short clip exported with every frame as a keyframe scrubs smoothly. A quick export: ffmpeg -i in.mp4 -an -vf "fps=24,scale=1280:-2,format=yuv420p" -c:v libx264 -preset slow -crf 28 -g 1 -movflags +faststart out.mp4. Short clips (5–10s) feel best.スクラブは動画のキーフレームにしか飛べないため、全フレームをキーフレーム化した短いクリップが滑らかです。書き出し例：ffmpeg -i in.mp4 -an -vf "fps=24,scale=1280:-2,format=yuv420p" -c:v libx264 -preset slow -crf 28 -g 1 -movflags +faststart out.mp4。5〜10秒の短い素材が最適です。
The blocks respect the visitor's “reduce motion” setting and fall back to a clean static state, with no scroll hijacking.訪問者の「視差効果を減らす」設定を尊重し、きれいな静止状態にフォールバックします。スクロールジャックもしません。
Your content stays, because these are native WordPress blocks. The motion simply stops; nothing breaks.素のWordPressブロックなので、中身はそのまま残ります。演出が止まるだけで、何も壊れません。
No. They're standard blocks in the WordPress editor.不要です。WordPress 標準エディタのブロックです。
Yes — the free plugin on WordPress.org gives you the full hero, and this page is a live demo, so you can try it before you buy. Pro is purchased directly (no trial). After payment, charges are non-refundable except where required by law; see the Refund Policy.はい。WordPress.org の無料版でヒーロー自体を使え、このページが実演なので、買う前に試せます。Pro は直接購入です（トライアルはありません）。決済後は法令で求められる場合を除き返金不可です。詳細は返金ポリシーをご覧ください。
The hero you just scrolled is one native WordPress block — free on WordPress.org. Get Pro for swapping headlines and fine scroll controls: $69/year, or $29 your first year with a coupon from our Discord.今スクロールしたヒーローは、素の WordPress ブロック1つ。WordPress.org で無料です。見出し swap とスクロール微調整の Pro は $69/年、Discord のクーポンで初年 $29 です。
GENE Scroll Hero