Use Fancy Text(Blotter.js) with Reactjs

bradley / Blotter

A JavaScript API for drawing unconventional text effects on the web.

A JavaScript API for drawing unconventional text effects on the web.

Home — Help

Overview

When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke something more playful. Precisely here, Blotter exists to provide an alternative.

GLSL Backed Text Effects with Ease

Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.

Atlasing Effects in a Single WebGL Back Buffer

Blotter renders all texts in a single WebGL context and limits the number…

View on GitHub

I just saw Blotter, but unfortunately, it hasn't been released as an npm package. Actually, I can build and use it, but I'm lazy so I googled to find out an npm package that allows me to use Blotter easily.

Fortunately, I could find out react-text-fun.

nitin42 / react-text-fun

React meets Blotter.js

react-text-fun

React meets Blotter.js

Table of contents

• Introduction

• Install

• Example

• Components

• Styling text

• Using text canvas

• Live examples

Introdution

react-text-fun is a small component library that encapsulates Blotter.js shader materials in the form of React components and provides a very easy to use API.

I created react-text-fun after finding myself imperatively using the Blotter.js APIs for custom and existing materials. I decided to convert all its shader materials in the form of React components to make it easier to work with.

Hope you find it useful as well 🙂

Install

yarn add react-text-fun

This package also depends on Blotter.js so make sure you put the below script in your HTML file.

<script src="https://unpkg.com/blotterjs-fork@0.1.0/build/blotter.min.js"></script>

Example

Let's take an example of distortion text material that distorts the shape of the text using various transforms

import { DistortionText } from 'react-text-fun'
import React from 'react';
import ReactDOM from 'react-dom';
const App

…

View on GitHub

The usage is very simple. Install react-text-fun and put the following in index.html

$ yarn create react-app blotter-react
$ cd blotter-react
$ yarn add react-text-fun
# or 
$ npm install react-text-fun

public/index.html

<script src="https://unpkg.com/blotterjs-fork@0.1.0/build/blotter.min.js"></script>

Create components folder in src
src/components/distortion.js

import { DistortionText } from "react-text-fun";

export const Distortion = ({ text }) => {
  return (
    <>
      <DistortionText
        text={text}
        fontSize={120}
        speed={1.5}
        rotation={45.0}
        distortX={0.9}
        distortY={0.5}
        noiseAmplitude={0.8}
        noiseVolatility={1.2}
      />
    </>
  );
};

src/App.js

import "./App.css";
// react-text-fun
import { Distortion } from "./components/distortion";
import { Flies } from "./components/flies";
import { SplitColor } from "./components/splitColor";
import { LiquidDistortion } from "./components/liquidDistortion";

function App() {
  return (
    <div className="App">
      <h1>blotter.js + react.js</h1>
      <br />
      <p>
        Distortion text is based on the Rolling Distort Material in Blotter.js.
      </p>
      <Distortion text={"Hello World"} />
      <br />
      <p>Flies Text component is based on the FliesMaterial in Blotter.js</p>
      <Flies text={"Hello World"} />
      <br />
      <p>Split color channel is based on ChannelSplitMaterial in Blotter.js</p>
      <SplitColor text={"Hello World"} />
      <br />
      <p>
        Liquid Distortion text is based on LiquidDistortMaterial in Blotter.js
      </p>
      <LiquidDistortion text={"Hello World"} />
    </div>
  );
}

export default App;

Demo
https://jovial-shannon-a70e98.netlify.app/

If you add dat.gui, you can add interactivity to the text easily.

dataarts / dat.gui

Lightweight controller library for JavaScript.

dat.GUI

A lightweight graphical user interface for changing variables in JavaScript.

Get started with dat.GUI by reading the API documentation.

Packaged Builds

The easiest way to use dat.GUI in your code is by using the built source at build/dat.gui.min.js. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.

In your head tag, include the following code:

<script type="text/javascript" src="dat.gui.min.js"></script>

Installing from npm

$ npm install --save dat.gui

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

const gui = new dat.GUI();

Directory Contents

├── build - Compiled source code.
├── src - Source files.
└── tests - Tests.

Building your own dat.GUI

In the terminal, enter the following:

$ npm install
$ npm run build

npm scripts

• npm run…

View on GitHub

The repo is here

koji / blotter-with-react

use Blotter.js with reactjs

Usage

Demo
https://jovial-shannon-a70e98.netlify.app/

$ git clone [e-mail]:koji/blotter-with-react.git
$ cd blotter-with-react
$ yarn
$ yarn start

This repo is using https://github.com/nitin42/react-text-fun

View on GitHub