Reactjs와 함께 Fancy Text(Blotter.js) 사용

브래들리 / 압지

웹에서 틀에 얽매이지 않는 텍스트 효과를 그리기 위한 JavaScript API입니다.

웹에서 틀에 얽매이지 않는 텍스트 효과를 그리기 위한 JavaScript API입니다.
Home —
Help

개요

웹의 텍스트에 효과를 적용할 때 디자이너는 전통적으로 CSS에서 제공하는 효과로 제한되었습니다. 대부분의 경우 이것은 전적으로 적합합니다. 텍스트가 텍스트 맞습니까? 그러나 여전히 CSS 속성이나 gif 및 이미지를 결합하여 더 재미있는 것을 불러일으키는 효과를 만드는 디자이너의 예가 많이 있습니다. 바로 여기에서 Blotter는 대안을 제공하기 위해 존재합니다.

쉽게 GLSL 지원 텍스트 효과

Blotter는 디자이너가 GLSL을 작성할 필요 없이 GLSL 셰이더를 활용하는 텍스트 효과를 만들고 조작하기 위한 간단한 인터페이스를 제공합니다. Blotter는 구성 가능한 효과의 라이브러리를 늘리는 동시에 학생 또는 숙련된 GLSL 프로그래머가 새 효과를 신속하게 부트스트랩할 수 있는 방법을 제공합니다.

단일 WebGL 백 버퍼의 아틀라스 효과

Blotter는 단일 WebGL 컨텍스트에서 모든 텍스트를 렌더링하고 수를 제한합니다…

View on GitHub

방금 Blotter를 보았지만 아쉽게도 npm 패키지로 출시되지 않았습니다. 사실 빌드해서 사용할 수는 있는데 게을러서 구글링을 해보니 쉽게 Blotter를 사용할 수 있게 해주는 npm 패키지를 찾았습니다.

다행히 react-text-fun 를 알아낼 수 있었습니다.

니틴42 / 반응 텍스트 재미

React와 Blotter.js의 만남

반응 텍스트 재미

React meets Blotter.js

소개

react-text-fun는 Blotter.js 셰이더 재료를 React 구성 요소 형태로 캡슐화하고 매우 사용하기 쉬운 API를 제공하는 작은 구성 요소 라이브러리입니다.

사용자 지정 및 기존 자료에 대해 Blotter.js API를 명령적으로 사용하여 자신을 찾은 후 react-text-fun를 만들었습니다. 더 쉽게 작업할 수 있도록 모든 셰이더 재료를 React 구성 요소 형태로 변환하기로 결정했습니다.

여러분도 유용하게 사용하시길 바랍니다 🙂

설치

yarn add react-text-fun

이 패키지도 Blotter.js에 의존하므로 아래 스크립트를 HTML 파일에 넣어야 합니다.

<script src="https://unpkg.com/[email protected]/build/blotter.min.js"></script&gt

예시

다양한 변형을 사용하여 텍스트의 모양을 왜곡하는 왜곡 텍스트 자료의 예를 들어 보겠습니다.

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/[email protected]/build/blotter.min.js"></script>

구성 요소 폴더 생성srcsrc/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;

데모
https://jovial-shannon-a70e98.netlify.app/

dat.gui를 추가하면 텍스트에 인터랙션을 쉽게 추가할 수 있습니다.

데이터 아트 / dat.gui

JavaScript용 경량 컨트롤러 라이브러리.

dat.GUI

JavaScript에서 변수를 변경하기 위한 경량 그래픽 사용자 인터페이스입니다.
API documentation 을 읽고 dat.GUI를 시작하십시오.

패키지 빌드

코드에서 dat.GUI를 사용하는 가장 쉬운 방법은 build/dat.gui.min.js 에 있는 빌드된 소스를 사용하는 것입니다. 이러한 빌드된 JavaScript 파일에는 dat.GUI를 실행하는 데 필요한 모든 종속 항목이 포함되어 있습니다.head 태그에 다음 코드를 포함합니다.

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

npm에서 설치

$ npm install --save dat.gui

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

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

const gui = new dat.GUI();

디렉토리 내용

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

나만의 da.GUI 만들기

터미널에서 다음을 입력합니다.

$ npm install
$ npm run build

npm 스크립트

npm 실행…

View on GitHub

레포는 여기

누룩 / 반응이 있는 블로터

reactjs와 함께 Blotter.js 사용

용법

데모
https://jovial-shannon-a70e98.netlify.app/

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

이 저장소는 https://github.com/nitin42/react-text-fun을 사용 중입니다.