DEV Community

0xkoji
0xkoji

Posted on

Use Fancy Text(Blotter.js) with Reactjs

#react #javascript #text

Alt Text

GitHub logo bradley / Blotter

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

Blotter logo

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.

GitHub logo nitin42 / react-text-fun

React meets Blotter.js

react-text-fun

React meets Blotter.js

Table of contents

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
…
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

public/index.html

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

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}
      />
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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

GitHub logo 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>
Enter fullscreen mode Exit fullscreen mode

Installing from npm

$ npm install --save dat.gui
Enter fullscreen mode Exit fullscreen mode 
// CommonJS:
const dat = require('dat.gui');

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

const gui = new dat.GUI();
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo koji / blotter-with-react

use Blotter.js with reactjs


View on GitHub


Oldest comments (0)

Read next

cristiancavelasquez profile image

Embedding a Power BI Dashboard: A Secure and Simple Solution

cristian velasquez -

vs-borodin profile image

Building a Collapsible UI Component in Angular: From Concept to Implementation 🚀

Vyacheslav Borodin -

shishsingh profile image

React 19: A New Era of Web Development

Shish Singh -

gauravadhikari1997 profile image

How to customize Strapi Dashboard / Home Page: The Right Way

Gaurav Adhikari -