fayaaa

KO | EN

gitlite — search

#privacy #ai-agents #java #dotnet #android #claude #react #codex #vue #css

(★ 9)

A shape-aware WebGPU playground for turning images, text, and marks into living fire.

파일 탐색기

ZIP 다운로드

- - ci.yml
- fayaaa-demo-poster.jpg
- art-painting.jpg
- artifact-mark.svg
- favicon.svg
- fayaaa-mark.png
- fire-burning.mp3
- nabil-bakour-avatar.png
- sample-fire.png
- sample-leaf-photo.png
- check-wgsl.sh
- params.mjs
- presets.mjs
- - apple-logo.svg
- - composite.wgsl
  - fayaaa.wgsl
  - jfa-init.wgsl
  - jfa-step.wgsl
  - jfa.wgsl
  - mask-default.wgsl
  - mask-image.wgsl
  - sdf-finalize.wgsl
- analytics.ts
- app.css
- base-path.ts
- control-icons.ts
- dialkit-controls.tsx
- effect-transition.ts
- export-config.ts
- export-dialkit-controls.tsx
- export-utils.ts
- fire-audio.ts
- image-input.ts
- main.ts
- mobile-controls.ts
- pipeline.ts
- playground-page.ts
- playground-persistence.ts
- wgsl-env.d.ts
- worker.mjs
- - ember-entry.wgsl
  - jfa-entry.wgsl
- analytics.test.ts
- ci-security.test.ts
- deployment-contract.test.ts
- effect-transition.test.ts
- export-config.test.ts
- fire-contract.test.ts
- image-input.test.ts
- mask-mode.test.ts
- playground-persistence.test.ts
- presentation-contract.test.ts
- render.gpu.test.ts
.env.example
.gitignore
index.html
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json
vite.config.ts
vitest.config.ts
wrangler.jsonc

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Fayaaa</h1>

Turn images, text, and marks into living fire. 
 A shape-aware WebGPU shader playground that runs entirely in the browser. 
 <a href="https://blueprintlab.work/fayaaa/">Open the live playground →</a>

<a href="https://blueprintlab.work/fayaaa/media/fayaaa-demo.mp4">
 <img src="media/fayaaa-demo-poster.jpg" width="900" alt="Watch the 75-second Fayaaa demo" />
 </a> 
 <a href="https://blueprintlab.work/fayaaa/media/fayaaa-demo.mp4">▶ Watch the 75-second demo</a>

## What is Fayaaa?

Fayaaa is a hands-on creative playground for applying a living fire material to a real
silhouette. Upload an image, type a word, or start with a sample mark; then shape the
direction, heat, color, motion, and composition while the shader runs in real time.

There are two image treatments:

- **Burn through** turns the subject itself into the Fayaaa material.
- **Burn around** keeps the image core visible while fire travels along its boundary.

Uploads never leave the browser. The active subject and background are stored locally so
refreshing the page does not break the composition.

Fayaaa uses anonymous product analytics that never include uploaded media, filenames,
entered text, or raw URLs.

## Playground

- Image and directly editable text subjects
- Shape-aware alpha, bright, and dark mask inference
- Fire direction, intensity, spread, inside glow, sharpness, and motion controls
- Normal, Screen, Add, Multiply, and Overlay blending
- Fire, Violet, and Mint palettes plus custom subject and background colors
- Color, image, or transparent backgrounds
- Source comparison, pause, sound, automatic intro, and reduced-motion support
- Flattened PNG export
- MP4 or WebM video export at 16:9, 1:1, 4:5, or 9:16; 3, 5, or 10 seconds at 24, 30, or 60 FPS

“Reset to default” resets the shader parameters only. It preserves the subject, uploaded
assets, background, palette, and color choices.

## How it works

```text
image / text
    ↓
mask inference
    ↓
anti-aliased jump flooding
    ↓
signed-distance field
    ↓
Fayaaa WGSL material
    ↓
live canvas / PNG / WebM
```

The pipeline builds a signed-distance field from the supplied shape, then composites the
fire in WGSL. The original subject texture is sampled inside WebGPU when Burn around is
active, so the final image remains one coherent render rather than stacked DOM layers.

## Run locally

Fayaaa uses pnpm and a current WebGPU-capable browser.

```bash
pnpm install
pnpm dev
```

Open [http://localhost:5173/fayaaa/](http://localhost:5173/fayaaa/).

## Quality checks

```bash
pnpm test       # interaction and shader contracts
pnpm typecheck  # strict TypeScript
pnpm check      # WGSL composition and reflection checks
pnpm build      # production build
```

For device-backed validation on a machine with a WebGPU adapter:

```bash
pnpm test:gpu
pnpm check:gpu
pnpm doctor
```

The default WGSL check still resolves imports, reflects bindings, and reports diagnostics
without a GPU. The `:gpu` commands require a real adapter and make device validation a hard
failure.

## Project structure

```text
src/          UI, WebGPU pipeline, persistence, exports, and shaders
shared/       canonical Fire parameters and presets
test/         behavior, presentation, mask, and rendering checks
public/       static assets and fallback media
scripts/      local validation helpers
```

The canonical material lives in [`src/shaders/fayaaa.wgsl`](src/shaders/fayaaa.wgsl). The
playground compositor, mask passes, and jump-flood pipeline live beside it in
[`src/shaders`](src/shaders).

## Contributing

Issues and focused pull requests are welcome. Please run the four default quality checks
before opening a PR, and include a short screen recording for changes that affect the
shader or interaction behavior.

## License

Fayaaa is available under the [MIT License](LICENSE).

fayaaa

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README