### Install performative-ui

Source: https://github.com/vorpus/performativeui/blob/main/README.md

Install the performative-ui package using npm. This is the primary method for adding the library to your project.

```bash
npm install performative-ui
```

--------------------------------

### API Route Example

Source: https://github.com/vorpus/performativeui/blob/main/demo/index.html

Example of an API route file where AI is actively writing.

```typescript
~/synthetica/app/api/route.ts AI is writing…
```

--------------------------------

### Three.js ASCII Effect Example

Source: https://github.com/vorpus/performativeui/blob/main/research/04_ascii_hero_art.md

A basic example demonstrating the ASCII effect using Three.js. This code snippet shows how to apply an ASCII filter to a WebGL scene.

```javascript
import * as THREE from 'three';
import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect.js';

let camera, scene, renderer, effect;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set( 0, 0, 200 );

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x000000 );

  const geometry = new THREE.BoxGeometry( 20, 20, 20 );
  const material = new THREE.MeshNormalMaterial();

  for ( let i = 0; i < 100; i ++ ) {
    const mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = Math.random() * 400 - 200;
    mesh.position.y = Math.random() * 400 - 200;
    mesh.position.z = Math.random() * 400 - 200;
    mesh.rotation.x = Math.random() * 2 * Math.PI;
    mesh.rotation.y = Math.random() * 2 * Math.PI;
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    scene.add( mesh );
  }

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  effect = new AsciiEffect( renderer, ' .:- noodles', {
    invert: true,
    resolution: 0.15
  } );
  effect.setSize( window.innerWidth, window.innerHeight );

  window.addEventListener( 'resize', onWindowResize );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
  effect.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
  requestAnimationFrame( animate );

  const time = performance.now() * 0.001;

  scene.traverse( function ( object ) {
    if ( object.isMesh ) {
      object.rotation.x = time;
      object.rotation.y = time;
    }
  } );

  effect.render( scene, camera );
}

```

--------------------------------

### Donut.c - Classic ASCII Art Animation

Source: https://github.com/vorpus/performativeui/blob/main/research/04_ascii_hero_art.md

A classic example of a rotating 3D donut rendered using ASCII characters. This code demonstrates the mathematical principles behind such animations.

```c
// Based on donut.c by Andy Sloane
// https://www.a1k0n.net/2011/07/20/donut-math.html
```

--------------------------------

### Custom GLSL ASCII Shader Example

Source: https://github.com/vorpus/performativeui/blob/main/research/04_ascii_hero_art.md

This boilerplate provides a custom GLSL ASCII shader for a rotating low-poly mesh, featuring mouse parallax and CRT scanlines. It's an advanced technique for a unique visual experience.

```javascript
// Boilerplate for nextjs-ascii-hero by Egor Shesternin
// https://nextjs-ascii-hero.vercel.app/
```

--------------------------------

### Framer Motion Div for Animation

Source: https://github.com/vorpus/performativeui/blob/main/research/02_logo_walls.md

An example using Framer Motion's `<motion.div>` component, a popular React library for animations, to implement scrolling effects for UI elements like logo walls.

```jsx
<motion.div
  animate={{ x: -200 }}
  transition={{ ease: "linear", duration: 2, repeat: Infinity }}
>
  {/* Logo elements here */}
</motion.div>
```

--------------------------------

### Basic ASCII Renderer with React Three Drei

Source: https://github.com/vorpus/performativeui/blob/main/research/04_ascii_hero_art.md

Use the AsciiRenderer from @react-three/drei to wrap a 3D model and render it as ASCII art. This is a quick way to achieve a stylized effect with minimal code.

```javascript
import { AsciiRenderer } from "@react-three/drei";

function Scene() {
  return (
    <>
      <mesh>
        <torusGeometry args={[1, 0.5, 16, 100]} />
        <meshBasicMaterial color="hotpink" />
      </mesh>
      <AsciiRenderer>
        <mesh>
          <torusGeometry args={[1, 0.5, 16, 100]} />
          <meshBasicMaterial color="hotpink" />
        </mesh>
      </AsciiRenderer>
    </>
  );
}
```

--------------------------------

### ASCII Art Rendering with dhravya/landing-effects

Source: https://github.com/vorpus/performativeui/blob/main/research/04_ascii_hero_art.md

Integrate the ASCII renderer from the dhravya/landing-effects library to apply ASCII art effects to hero images. This library offers a drop-in solution for creating viral effects.

```javascript
import Ascii from "dhravya/landing-effects";

function App() {
  return (
    <div className="App">
      <Ascii image="/path/to/your/hero-image.jpg" />
    </div>
  );
}
```

--------------------------------

### React Fast Marquee Component

Source: https://github.com/vorpus/performativeui/blob/main/research/02_logo_walls.md

Demonstrates the usage of the `react-fast-marquee` library, an open-source solution for creating marquee-style scrolling effects in React applications. It's commonly used for customer logo lists.

```jsx
import Marquee from "react-fast-marquee";

function LogoMarquee() {
  return (
    <Marquee>
      {/* Logo components */}
      <img src="logo1.png" alt="Logo 1" />
      <img src="logo2.png" alt="Logo 2" />
      {/* ... more logos */}
    </Marquee>
  );
}
```