Title: ThreeFS Fluid Hero Author: Rieko Kubo Published: September 11, 2026 Last modified: September 12, 2026 --- Search plugins ![](https://s.w.org/plugins/geopattern-icon/threefs-fluid-hero.svg) # ThreeFS Fluid Hero By [Rieko Kubo](https://profiles.wordpress.org/riekokubo/) [Download](https://downloads.wordpress.org/plugin/threefs-fluid-hero.zip) * [Details](https://wordpress.org/plugins/threefs-fluid-hero/#description) * [Reviews](https://wordpress.org/plugins/threefs-fluid-hero/#reviews) * [Installation](https://wordpress.org/plugins/threefs-fluid-hero/#installation) * [Development](https://wordpress.org/plugins/threefs-fluid-hero/#developers) [Support](https://wordpress.org/support/plugin/threefs-fluid-hero/) ## Description ThreeFS Fluid Hero enhances the WordPress Cover block: choose one background image, add one H1 and select the “ThreeFS Fluid” style. The Cover block keeps control of height and responsive layout. There is no trial period or time-based limitation. WebGL is progressively enhanced on fine-pointer devices. Touch devices, reduced- motion users, unsupported browsers and failed image loads keep the static Hero design. Existing blocks and classic-theme Hero elements can opt in by adding the `threefs- fluid-target` CSS class. Classic themes can use the shortcode below or the `threefs_fluid_hero()` PHP template function. ``` [threefs_fluid_hero image_id="123" heading="A fluid first impression" id="top"] ``` ### Credits The Stable Fluids pass structure is adapted from `ics-creative/250916_threejs_fluids`( https://github.com/ics-creative/250916_threejs_fluids), Copyright (c) 2025 ICS INC., MIT License: ``` Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` Three.js is Copyright © 2010-2026 three.js authors and is licensed under the MIT License above. ## Blocks This plugin provides 1 block. * ThreeFS Fluid Hero 背景画像とH1に、ポインターへ反応する流体表現を追加します。 ## Installation 1. Upload the `threefs-fluid-hero` folder to `/wp-content/plugins/`. 2. Activate ThreeFS Fluid Hero. 3. In the block inserter, search for “ThreeFS Fluid Hero” and add it to the top of the page. 4. Choose a background image, enter the H1, then adjust strength and accent color in the sidebar. ## FAQ ### Do I need any coding knowledge to use this? No. Add the block, choose an image, type your heading, and adjust the strength/color sliders in the block settings sidebar. No shortcodes or code editing are required for the block editor workflow. ### Which block does this extend? The core WordPress Cover block. You are not learning a new block — you are choosing an extra style (“ThreeFS Fluid”) on the block you already know, so height, alignment and responsive behavior still follow the Cover block’s own settings. ### Does it still work if a visitor’s browser doesn’t support WebGL? Yes. When WebGL, a fine (mouse-like) pointer, or the visitor’s system doesn’t support it, they simply see the static Hero — background image, overlay and heading — with no animation. Nothing breaks, and no separate fallback image is required beyond the one you already chose. ### Will this slow down my site? The fluid effect only loads on devices with a fine pointer that support WebGL, and only on pages where the block is actually present. Touch devices and visitors with“ reduce motion” enabled never load the effect scripts at all. ### Does it respect accessibility settings? Yes. Visitors with “reduce motion” enabled in their operating system automatically get the static version. The heading stays as real, readable HTML — not an image or canvas text — so it works normally with screen readers and search engines. ### Can I use it outside the block editor (classic theme, page builder, etc.)? Yes. Use the `[threefs_fluid_hero]` shortcode, or call the `threefs_fluid_hero()` PHP function from a classic theme template. Both accept the same options (image, heading, color, strength, direction) as the block. ``` [threefs_fluid_hero image_id="123" heading="A fluid first impression" id="top"] ``` ### Can I apply the effect to a Hero I already built? Yes. Add the `threefs-fluid-target` CSS class to an existing Cover block (or a compatible element) via the block’s Advanced panel, and it will pick up the same fluid effect without rebuilding the block. ### Is there a trial period or a feature locked behind a paid upgrade? No. Every option described above is included, with no time limit and no watermark. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “ThreeFS Fluid Hero” is open source software. The following people have contributed to this plugin. Contributors * [ Rieko Kubo ](https://profiles.wordpress.org/riekokubo/) [Translate “ThreeFS Fluid Hero” into your language.](https://translate.wordpress.org/projects/wp-plugins/threefs-fluid-hero) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/threefs-fluid-hero/), check out the [SVN repository](https://plugins.svn.wordpress.org/threefs-fluid-hero/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/threefs-fluid-hero/) by [RSS](https://plugins.trac.wordpress.org/log/threefs-fluid-hero/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.7.0 * Fix the WebGL title texture ignoring the H1’s own text alignment (it always drew from the left edge) and letter-spacing. * Add a curated, no-webfont-to-load font picker for the “ThreeFS Fluid” Cover heading, with a live preview both in the sidebar and on the canvas. * Keep the heading inside a “ThreeFS Fluid” Cover locked to Heading level 1, since the WebGL effect requires a real H1. #### 0.6.1 * Fix the WebGL title texture ignoring the H1 text color set in the block editor and always rendering it white. #### 0.6.0 * Add button presets for left-to-right, right-to-left and pointer-only motion. * Save the selected motion on Cover blocks and legacy integrations. #### 0.5.0 * Add the optional “ThreeFS Hero Page” template for a full-width Hero without a duplicated theme page title. * Keep the layout opt-in so existing pages and theme templates are never changed automatically. #### 0.4.0 * Add a direct “ThreeFS Fluid Hero” entry to the block inserter. * Remove the pattern-first workflow so users can edit a normal Cover block immediately. * Keep existing inserted patterns and legacy blocks compatible. #### 0.3.0 * Add a ready-to-edit ThreeFS Fluid Hero block pattern. * Warn in the editor when a styled Cover is missing its image or H1. * Apply saved strength and accent color on the server-rendered Cover markup. * Keep the original Fluid Hero block fully compatible for existing content. #### 0.2.0 * Add the ThreeFS Fluid style for Cover blocks. * Let Cover blocks and themes control responsive Hero height. * Keep the original Fluid Hero block only for backwards compatibility. #### 0.1.0 * Initial Gutenberg block release. ## Meta * Version **0.7.0** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.1** * PHP version ** 7.4 or higher ** * Tags * [animation](https://wordpress.org/plugins/tags/animation/)[gutenberg](https://wordpress.org/plugins/tags/gutenberg/) [hero](https://wordpress.org/plugins/tags/hero/)[three.js](https://wordpress.org/plugins/tags/three-js/) [webgl](https://wordpress.org/plugins/tags/webgl/) * [Advanced View](https://wordpress.org/plugins/threefs-fluid-hero/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/threefs-fluid-hero/reviews/) ## Contributors * [ Rieko Kubo ](https://profiles.wordpress.org/riekokubo/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/threefs-fluid-hero/)