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

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