fort reno

fort reno is a simple React based livecoding framework built on top of Shaders, using the declarative, component-based syntax built to stay lightweight, fast to tweak, and reliable during performance. Named after the historic DC DIY summer concert series.

What It Is

• A minimal environment for live visual coding
• A quick way to test and layer shader-based scenes
• A performance tool designed for real-time improvisation

Getting Started

1. Clone the repo.
2. Install dependencies:

npm install

3. Run in development mode:

npm run dev

4. Open the local URL shown in your terminal.

Basic Example

Update src/App.jsx to the following:

import { Shader, Aurora, Godrays } from "shaders/react";

export default function App() {
  return (
    <div style={{ width: "100vw", height: "100vh", background: "#05070d" }}>
      <Shader>
        <Aurora intensity={80} speed={3} />
        <Godrays intensity={0.8} speed={5} />
      </Shader>
    </div>
  );
}

In your terminal, run:

npm run dev

Visit http://localhost:5173

You should see something similar to the following:

Audio reactivity example

Update src/App.jsx to the following:

import { Shader, Aurora, Godrays } from "shaders/react";
import { useAudioParams } from "./useAudioParams";

export default function App() {
  const { speed, intensity, waviness, rays } = useAudioParams();

  return (
    <div style={{ width: "100vw", height: "100vh", background: "#05070d" }}>
      <Shader>
        <Aurora speed={speed} intensity={intensity} waviness={waviness} />
        <Godrays intensity={rays} />
      </Shader>
    </div>
  );
}

More examples

More examples can be found in the examples folder.

Example Performance Workflow

1. Start with base scene.
2. Keep key parameters mapped for fast edits (intensity, speed, color, density).
3. Add additional components listed in the documentation for Shaders.
4. Build transitions by gradually changing one or two parameters at a time.