iPhone · iPad · Mac · Apple Vision Pro · Android

ことばが、
動く絵になる。

思い浮かんだ情景を一文で書くだけ。AI がシェーダーを書き、あなたの端末の GPU がその場で描きます。

まずは Web で試す →

無料 · 広告なし · 閲覧はサインイン不要

PROMPT

描画中

星雲のドリフト

01 / NATIVE

一枚の作品が、手元のどの端末でも動く。

iPhone で見つけた作品を、Mac の大きな画面や Vision Pro の空間で。どの端末でも、その端末の GPU で直接描くので、なめらかに動きます。モーションを減らす設定にしておけば、動かない絵で表示されます。

iPhone

Android

iPad

Mac

Apple Vision Pro

カーソルを重ねると動きます

02 / EVERYDAY

アプリを開かなくても、作品が見られる。

セルラー・ブルーム

ホーム画面ウィジェット

iPhone でも Android でも、お気に入りの一枚を固定してホーム画面を額縁に。固定しなければ、最新の作品が表示されます。

“GRAPHICA でギャラリーを見る”

Siri とショートカット

声やショートカットから、ギャラリーを開く・作品をつくる。オートメーションに組み込むこともできます。

✦/w/…

リンクひとつで共有

作品のリンクは Web でもアプリでも同じ作品ページに。受け取った人の画面でも、そのまま動きます。

03 / YOUR WAY

生成のしかたは、選べる。

SHARED

共有の無料枠

サインインすれば、サーバーの無料枠ですぐに生成できます。

ON-DEVICE

オンデバイス

Apple Intelligence 対応の端末なら、端末の中だけで生成。キーもアカウントも要りません。

BYOK

自分の API キー

自分のキーを持ち込めば回数を気にせず。キーは端末のキーチェーンにだけ保存され、サーバーには残りません。

MCP

AI エージェント

Claude などのエージェントがシェーダーを書いて投稿することも。Mac アプリから連携を設定できます。

04 / OPEN SOURCE ART

どの作品も、コードまで読める。

すべての作品はソースを読めます。iPhone・iPad・Mac では Metal に変換したコードを、Android と Web では元の GLSL を。気に入った表現を、自分の作品やプロジェクトの出発点に。

星雲のドリフト

// GRAPHICA — "星雲のドリフト" — auto-generated MSL.

#include <metal_stdlib>
using namespace metal;

struct GraphicaUniforms {
    float3 iResolution;
    float iTime;
    float4 iMouse;
    int iFrame;
};

struct GraphicaVertexOut {
    float4 position [[position]];
};

// 頂点バッファ不要のフルスクリーントライアングル。3 頂点で画面全体を覆う。
vertex GraphicaVertexOut graphicaVertex(uint vid [[vertex_id]]) {
    float2 uv = float2(float((vid << 1) & 2), float(vid & 2));
    GraphicaVertexOut out;
    out.position = float4(uv * 2.0 - 1.0, 0.0, 1.0);
    return out;
}

float hash21(float2 p) {
  p = fract(p * float2(234.34, 435.345));
  p += dot(p, p + 34.23);
  return fract(p.x * p.y);
}

float vnoise(float2 p) {
  float2 i = floor(p);
  float2 f = fract(p);
  float2 u = f * f * (3.0 - 2.0 * f);
  return mix(
    mix(hash21(i), hash21(i + float2(1.0, 0.0)), u.x),
    mix(hash21(i + float2(0.0, 1.0)), hash21(i + float2(1.0, 1.0)), u.x),
    u.y
  );
}

float fbm(float2 p) {
  float v = 0.0;
  float a = 0.5;
  float2x2 rot = float2x2(0.8, -0.6, 0.6, 0.8);
  for (int i = 0; i < 6; i++) {
    v += a * vnoise(p);
    p = rot * p * 2.03;
    a *= 0.5;
  }
  return v;
}

void mainImage(thread float4& fragColor, float2 fragCoord, GraphicaUniforms u_g) {
  float2 uv = (fragCoord * 2.0 - u_g.iResolution.xy) / u_g.iResolution.y;
  float t = u_g.iTime * 0.07;

  float2 q = float2(fbm(uv + t), fbm(uv + float2(5.2, 1.3) - t));
  float2 r = float2(
    fbm(uv + 4.0 * q + float2(1.7, 9.2) + t * 0.6),
    fbm(uv + 4.0 * q + float2(8.3, 2.8) - t * 0.4)
  );
  float f = fbm(uv + 4.0 * r);

  float3 col = mix(float3(0.015, 0.025, 0.07), float3(0.12, 0.30, 0.62), clamp(f * f * 3.6, 0.0, 1.0));
  col = mix(col, float3(0.85, 0.42, 0.18) * 0.7, clamp(length(q) * 0.75, 0.0, 1.0) * f);
  col = mix(col, float3(0.96, 0.92, 0.84), pow(clamp(r.y, 0.0, 1.0), 6.0) * 0.55);
  col *= 0.45 + 0.55 * f * 2.1;
  col *= 1.0 - 0.42 * dot(uv * 0.55, uv * 0.55);
  col = max(col, 0.0);
  fragColor = float4(pow(col, float3(0.88)), 1.0);
}

fragment float4 graphicaFragment(
    float4 position [[position]],
    constant GraphicaUniforms& u_g [[buffer(0)]]
) {
    float4 color = float4(0.0, 0.0, 0.0, 1.0);
    float2 fragCoord = float2(position.x, u_g.iResolution.y - position.y);
    mainImage(color, fragCoord, u_g);
    return float4(color.rgb, 1.0);
}

05 / GALLERY