Skip to content

Package that exports a component that can be used to play ascii animations inside a React.js application.

License

Notifications You must be signed in to change notification settings

datsfilipe/web-ascii-theater

Repository files navigation

Ascii Theater

As it says, using this package you can play whatever video you want in React.js as an Ascii animation. Follow the steps to do it.

Showcase

You can see how it would be in here: deploy.

Steps

  • You can see the examples, in main repo inside "src/scripts", of the scripts used to download the video and extract the frames;
  • If you cannot see it in the main repo, you can try to find package folder inside your node_modules, the scripts will be there;
  • You need to specify the path for the frames (recommend you to use public folder inside your app :));
  • Some of the props are mandatory, like: framesDir, framesCount, width and height.

Usage

import { AsciiTheater } from '@datsfilipe/web-ascii-theater'

// ...
return (
  // ...
  <AsciiTheater
    width={90}
    height={50}
    framesDir={/* path to your frames folder */}
    framesCount={/* total frames/images in the folder */}
    customStyles={/* add custom styles in object style */}
    loop={true}
  />
  // ...
)

Installation

# npm
npm i @datsfilipe/web-ascii-theater@latest
# pnpm
pnpm i @datsfilipe/web-ascii-theater@latest
# yarn
yarn add @datsfilipe/web-ascii-theater@latest

About

Package that exports a component that can be used to play ascii animations inside a React.js application.

Topics

Resources

License

Stars

Watchers

Forks

Packages