SQUARE ONE / Art Assets

Generative · Standalone · Image-free
完成度の高い
静かなアート素材

Hero / カバー / 余白 / ローディングなど、それ自体で「絵」として置けるよう設計した自律生成アセット。SQUAREONEのblue cockpit palette内で表現し、外部画像なしのcanvas / WebGLのみで構成。LP・提案書・管理画面ヘッダ・記事サムネ等に直接埋め込める。

DG-60 · Asset A

流体ノットJellyfish Knot — Organic 3D Form

Three.js の TorusKnot 表面にサンプリングした点群を、半透明メッシュの上に重ねて描画。ゆるやかな多軸回転と呼吸スケールで「生き物のような」3D 形態を作る。Hero / カバー / ローディング / 詩的セクション の主役素材として置ける。

A · KNOT GRP EST · 2026 FICTION Generative // 03:14 loop
Engine
Three.js Mesh + Points
Particles
14,000
Color
accent → accent-light
Use
Hero / Cover / Loader
DG-61 · Asset B

宇宙的ドットフィールドCosmic Halftone Field — Ambient Texture

2D Canvas に Value-Noise を 4 オクターブ合成し、点の大小と濃度で大陸状クラスターを描画。低速ドリフトで微振動。背景の地紋・セクション間の余白埋め・カバー画像の代替として使え、テキストの可読性を損なわずにアンビエントな密度を加える。

B · FIELD AMBIENT DOT 80×50 DRIFT 0.04 Cosmic // continents
Engine
Canvas 2D + fBm noise
Cells
~4,000
Animation
Drift + breathe
Use
Background / Pattern
DG-62 · Asset C

ドミノ列と球Stack Cascade — Process / Chain

立板 12 枚と先頭の球。波の伝播のように板が順次傾き、戻る。プロセス・連鎖反応・ロジックの順序を視覚化したいセクション (How it works / Methodology / Step by step) のヒーロー素材として。

C · STACK CHAIN 12 PLATES + 1 SPHERE LOOP 6.0s Stack // cascade
Engine
Three.js Points
Pieces
12 plates + 1 sphere
Animation
Wave 6.0s loop
Use
Process / Methodology
DG-63 · Asset D

七色の液体球Iridescent Liquid Blob — Refractive Bloom

高密度の icosphere を 3 オクターブ Simplex Noise で頂点変位させ、薄膜干渉 (iridescence) と透過屈折 (transmission) を MeshPhysicalMaterial に乗せた液状の球。物理 PBR + 手続き的 RoomEnvironment による完全自己完結。dark hero / mystic intro / ローディング向け。warm パレット中心の他 3 アセットに対し、唯一の rainbow 系コントラスト要素。

D · BLOB PBR // IRIDESCENT ICOSA · 48 SUB DRIFT 0.30 Liquid // thin-film
Engine
Three.js Physical PBR
Geometry
Icosphere · 48 sub
Optics
Iridescence + Transmission
Use
Hero / Mystic / Intro
DG-64 · Asset E

シズル液体Iridescent Liquid — Gel Surface / Scintillation

黒背景に透明な液体球を描く、単体 HTML の生成アート素材。プリズム反射・水膜のゆらぎ・微細な気泡・表面のボコつきをスライダーで調整でき、保存ボタンでその時点の質感を HTML として持ち帰れる。hero / loader / key visual / dark premium intro で、艶・水感・シンチレーションを主役にしたい時の新しいアート素材。

E · LIQUID GENERATIVE // GEL PRISM · BUMPS SAVEABLE HTML Liquid // scintillation
Engine
Standalone HTML
Controls
Prism / Bumps / Bubbles
Optics
Scintillation + refraction
Use
Hero / Loader / Key visual
DG-65 · Asset F

霜の氷キューブFrosted Ice Cube — Web-Ready Generative Object

黒背景に浮かぶ半透明の氷立方体を描く、単体 HTML の生成アート素材。霜の白い曇り、内部の気泡、角のプリズム反射、表面のチップ感を調整でき、保存ボタンでその時点の質感を HTML として持ち帰れる。hero / loader / product intro / dark premium visual に、そのまま埋め込んで使える新しい氷素材。

F · ICE GENERATIVE // FROST FROST · CHIPS WEB-READY HTML Ice // frosted cube
Format
Standalone HTML
Controls
Frost / Chips / Bubbles
Optics
Prism edges + refraction
Use
Hero / Loader / Product intro
DG-66 · Asset G

大陸ドット球儀Continent Dot Globe — Hero KV

大陸を点群でラスタライズし、緯線・経線・大気ハロー・スキャンリング・周回シグナルを重ねた 3D 地球。SITE-09 brandcloud の Hero KV として制作した「監視 / 防御」を象徴するブランドビジュアル。Three.js + Canvas2D ハイブリッド。

G · CONTINENT HERO SITE-09 brandcloud THREE.js + RASTER
Engine
Three.js + Canvas2D continent raster
Layers
land dots / ocean dots / meridian grid / halo / scan ring / orbital sparks
Color
deep navy → glow indigo
Use
Hero / KV / Brand defense
DG-67 · Asset H

ワイヤーフレーム監視球Wireframe Threat Globe — About / Content

ジオデシック構造のワイヤーフレーム球に、軌道カーブとシグナルピング、グロー、コーナーフレームを組み合わせた監視 UI 風ビジュアル。LIVE THREAT MONITORING / REPUTATION DEFENSE NETWORK のラベルとセットで SITE-09 brandcloud の About セクションを担う。

H · WIREFRAME ABOUT SITE-09 brandcloud THREE.js WIRE
Engine
Three.js Wireframe Sphere
Layers
geodesic wire / orbital signal curves / glow / corner frame
Color
navy + cyan glow
Use
About / Trust / Monitoring