Use Fancy Text(Blotter.js) with Reactjs

0xkoji - Mar 2 '21 - - Dev Community

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


Image
The Most Successful L Shaped Bunk Beds With Desk Gurus Do Three Things
Image
精品小说 逆天邪神 火星引力- 第1533章 绝心千叶 零落歸山丘 細雨無人我獨來 閲讀-p3
Image
Zout vervangen: wat is zoutverbruik waterontharder?
Image
The Top 5 Reasons Why People Are Successful At The Workout Bike For Sale Industry
Image
8 Tips For Boosting Your Isuzu Truck Key Replacement Game
Image
This Is The Intermediate Guide To Mesothelioma And Asbestos Lawyers
Image
Truck Key Cover Tools To Make Your Daily Life
Image
人氣小说 逆天邪神 起點- 第1548章 踩踏 一語驚醒夢中人 必變色而作 相伴-p3
Image
Guide to Buying Bullion Bars vs. Coins
Image
A Look At The Ugly Truth About Repair Bifold Door Bottom Pivot
Image
20 Tools That Will Make You More Efficient At Electric Fireplace Built In Wall
Image
20 Rising Stars To Watch In The Can I Get A Copy Of My Gas Safe Certificate Industry
Image
New features in Amazon Bedrock Prompt Management

aws, bedrock, promptengineering, genai
Image
A Peek Inside Gas Safety Certificate Check's Secrets Of Gas Safety Certificate Check
Image
Cat Flap Installation Cost
Image
Why People Don't Care About Wall Mount For Electric Fireplace
Image
Building a Modern Personal Portfolio"?

webdev, javascript, beginners, programming
Image
Revolutionizing Retail with Voice Commerce and Voicebot Technology

ai, chatgpt, voicebot, voiceui
Image
Unlocking Wealth: The Rise of Automatic Money Systems
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .