About this file
Seigaiha (青海波, "blue sea waves") is the traditional pattern of overlapping fans of concentric arcs, row upon row like waves out to sea. In this shader the arcs breathe gently in and out on a wave that travels across the pattern, the rows sway a little, and a soft sheen of light passes over them: calm enough to sit behind a page, with enough life to notice.
Every arc is drawn exactly at any size, so lines stay crisp on a 4K screen and in the 1080p video. The colours, the number of fans across the frame, arcs per fan, line weight, band strength, ripple, sway and sheen are all settings. The demo has presets in traditional colours: ai indigo, kon and gold, asagi teal, shu vermilion on kinari, sakura and sumi ink, plus a Behind text preset.
Made for hero sections, restaurant, tea, travel and wellness sites, Japanese-inspired brands, stream backgrounds and video title cards. Its reduced-motion setting holds it still on its poster frame for visitors who ask for less motion, and a veil setting softens the arcs so text reads on top. At the Behind text preset, light text keeps a contrast ratio of at least 5.3:1 against 98 % of the background under it.
What you get: a GLSL ES 3.00 fragment shader for plain WebGL2, an ES module that returns a three.js ShaderMaterial, a Shadertoy version, an offline demo page with a settings panel, a 10-second 1920 x 1080 H.264 loop that plays end to start without a seam, the same loop upright at 1080 x 1920 for vertical video, and the poster frame as a PNG (and a WebP for the web). One pass with no textures, about 0.4 ms of GPU time per 1920 x 1080 frame on a recent laptop, measured in headless Chromium. The README covers set-up, reduced motion, every uniform and performance notes.
What you download
9 files · 33.2 MB · MD, HTML, MP4, PNG, WEBP, FRAG, GLSL, JS
- README.md14 KB MD
- seigaiha-waves-shader-demo.html28 KB HTML
- seigaiha-waves-shader-loop-1080p.mp414.9 MB MP4
- seigaiha-waves-shader-loop-1080x1920.mp415.1 MB MP4
- seigaiha-waves-shader-poster.png1.9 MB PNG
- seigaiha-waves-shader-poster.webp1.2 MB WEBP
- seigaiha-waves-shader.frag9 KB FRAG
- seigaiha-waves-shader.shadertoy.glsl8 KB GLSL
- seigaiha-waves-shader.three.js10 KB JS
Details
- Shelf
- Shaders
- Type
- Single file
- Topics
- animated backgroundglslhero sectionindigojapanesejapanese patternposter framereduced motionseamless patternseigaihashadershadertoythree jsvideo loopwagarawave patternwebglzen
- Licence
- Personal or commercial
What the licence allows
Personal licence
- Use it in projects for yourself, for learning, and in your portfolio.
- Change it and combine it with other work.
- Keep using it forever. The licence does not expire.
- Use it in anything that earns money, including client work and monetised video.
- Use it in a product, a game or an app that is sold or carries ads.
- Resell, redistribute or share the file.
- Put it into a dataset used to train a model.
Commercial licence
- Use it in unlimited commercial projects, including client work.
- Ship it inside products you sell: games, apps, films, print runs, print-on-demand.
- Use it in monetised and sponsored content, and in broadcast.
- Change it, and keep the result. No credit required, though it is always welcome.
- Keep using it forever. The licence does not expire.
- Resell or redistribute the asset as an asset, on its own or in a pack.
- Register it, or anything substantially it, as a logo or trademark.
- Put it into a dataset used to train a model.
Better together
Also in these packs
Shaders