React Component Export

Export your ASCII animations as self-contained React components that can be imported directly into React applications.

Overview

The exported component:

• Plays animation automatically
• Loops by default
• Includes optional playback controls
• Works with React 18+
• Supports TypeScript or JavaScript

Accessing React Export

React Settings

TypeScript Toggle

Include Controls

When enabled, the component includes:

• Play/Pause button
• Progress indicator
• Restart button

Include Background

File Name

Enter a name for your component file:

• Automatically converts to PascalCase for component name
• Sanitizes invalid characters
• Example: my-animation → MyAnimation.tsx

Output Structure

TypeScript Output (.tsx)

'use client';
import React, { useEffect, useRef, useState } from 'react';
 
type Frame = {
  duration: number;
  cells: Array<{
    x: number;
    y: number;
    char: string;
    color: string;
    bgColor?: string;
  }>;
};
 
const frames: Frame[] = [...];
 
export const MyAnimation: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [isPlaying, setIsPlaying] = useState(true);
  // ... rendering and playback logic
};
 
export default MyAnimation;

JavaScript Output (.jsx)

'use client';
import React, { useEffect, useRef, useState } from 'react';
 
const frames = [...];
 
export const MyAnimation = () => {
  const canvasRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(true);
  // ... rendering and playback logic
};
 
export default MyAnimation;

Usage Instructions

After exporting, use the component:

Basic Import

import MyAnimation from './MyAnimation';
 
function App() {
  return (
    <div>
      <h1>My ASCII Art</h1>
      <MyAnimation />
    </div>
  );
}

With Styling

import MyAnimation from './MyAnimation';
 
function App() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <MyAnimation />
    </div>
  );
}

Component Features

Shader Support

When your project uses shaders (blur, glow, chromatic aberration, etc.), the exported React component includes an embedded WebGL2 runtime that reproduces all shader effects. The GLSL sources are bundled directly into the component — no external dependencies needed.

Auto-Play

• Animation starts playing on mount
• Loops continuously by default
• No user interaction required

Canvas Rendering

• Uses HTML5 Canvas for rendering
• Efficient frame-by-frame updates
• Respects original frame durations

Playback Controls (Optional)

When "Include Controls" is enabled:

• Play/Pause - Toggle animation
• Restart - Jump to frame 1
• Progress - Visual indicator

Workflow Examples

Quick Embed

Interactive Demo

Portfolio Piece

Framework Compatibility

Next.js

The component includes 'use client' directive for Next.js App Router:

// Works automatically in Next.js 13+
import MyAnimation from '@/components/MyAnimation';
 
export default function Page() {
  return <MyAnimation />;
}

Vite/Create React App

Works out of the box:

import MyAnimation from './components/MyAnimation';
 
function App() {
  return <MyAnimation />;
}

Gatsby

Import as any other component:

import MyAnimation from '../components/MyAnimation';
 
const IndexPage = () => <MyAnimation />;

Customization

Styling the Container

Wrap the component for custom positioning:

<div className="animation-container">
  <MyAnimation />
</div>

.animation-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
}

Modifying the Component

After export, you can edit:

• Canvas dimensions
• Font settings
• Playback speed
• Control styling

Comparing to HTML Export

Tips

• Use TypeScript for better IDE support
• Disable controls for background animations
• Enable background if canvas should fill color
• Test in your project before production use
• Keep animations simple for best performance

Troubleshooting

Component Doesn't Render

• Verify React 18+ is installed
• Check import path is correct
• Ensure file extension matches (.tsx vs .jsx)

Animation is Choppy

• Reduce frame count in original
• Simplify canvas content
• Check browser performance

Controls Don't Work

• Verify "Include Controls" was enabled
• Check for CSS conflicts
• Ensure component mounts properly

TypeScript Errors

• Use .tsx extension
• Verify React types are installed
• Check tsconfig.json settings