A JavaScript API for drawing unconventional text effects on the web.
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…
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
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
…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.
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…
The repo is here
koji / blotter-with-react
use Blotter.js with reactjs
Usage
Demo
https://jovial-shannon-a70e98.netlify.app/
$ git clone git@github.com:koji/blotter-with-react.git
$ cd blotter-with-react
$ yarn
$ yarn start
This repo is using https://github.com/nitin42/react-text-fun
Oldest comments (0)