{"id":16513728,"url":"https://github.com/nitin42/react-text-fun","last_synced_at":"2025-03-21T08:31:32.820Z","repository":{"id":57346287,"uuid":"184922772","full_name":"nitin42/react-text-fun","owner":"nitin42","description":"React meets Blotter.js","archived":false,"fork":false,"pushed_at":"2019-05-12T13:13:39.000Z","size":4951,"stargazers_count":56,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T04:31:46.779Z","etag":null,"topics":["creative-coding","generative-art","reactjs","tools","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-04T17:05:32.000Z","updated_at":"2024-11-26T11:07:11.000Z","dependencies_parsed_at":"2022-09-18T11:01:43.106Z","dependency_job_id":null,"html_url":"https://github.com/nitin42/react-text-fun","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-text-fun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-text-fun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-text-fun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-text-fun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-text-fun/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244228424,"owners_count":20419414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative-coding","generative-art","reactjs","tools","web"],"created_at":"2024-10-11T16:10:03.870Z","updated_at":"2025-03-21T08:31:30.567Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-text-fun\n\n\u003e React meets Blotter.js\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/demo.gif\" /\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n* [Introduction](#introduction)\n\n* [Install](#install)\n\n* [Example](#example)\n\n* [Components](#blotter-components)\n\n* [Styling text](#styling-text)\n\n* [Using text canvas](#using-text-canvas)\n\n* [Live examples](#live-examples)\n\n## Introdution\n\n`react-text-fun` is a small component library that encapsulates [Blotter.js](https://blotter.js.org/#/materials) shader materials in the form of React components and provides a very easy to use API.\n\nI 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.\n\nHope you find it useful as well 🙂\n\n## Install\n\n```\nyarn add react-text-fun\n```\n\nThis package also depends on `Blotter.js` so make sure you put the below script in your HTML file.\n\n```\n\u003cscript src=\"https://unpkg.com/blotterjs-fork@0.1.0/build/blotter.min.js\"\u003e\u003c/script\u003e\n```\n\n## Example\n\nLet's take an example of distortion text material that distorts the shape of the text using various transforms\n\n```jsx\nimport { DistortionText } from 'react-text-fun'\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = props =\u003e (\n  \u003cdiv\u003e\n    \u003cDistortionText text=\"Hello wold\" /\u003e\n  \u003c/div\u003e\n)\n\n// Assuming you have an element with id 'root' to which you want the component to render to.\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\nIf your example compiles successfully, you should see this output.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/distortion-text.gif\" /\u003e\n\u003c/p\u003e\n\nCool, isn't it?\n\n[Check out the API reference](#distortion-text) for `DistortionText` component to see what other effects you can apply to the text.\n\n## Blotter components\n\n### Distortion Text\n\nDistortion text is based on the [Rolling Distort Material](https://blotter.js.org/#/materials/RollingDistortMaterial) in Blotter.js. \n\n**Example**\n\n```jsx\nimport { DistortionText } from 'react-text-fun'\n\n\u003cDistortionText\n  text=\"Hello World\"\n  fontSize={120}\n  speed={1.5}\n  rotation={45.0}\n  distortX={0.9}\n  distortY={0.5}\n  noiseAmplitude={0.8}\n  noiseVolatility={1.2}\n/\u003e\n```\n\n| Prop        | Description           | Type  |\n| ------------- |:-------------:| -----:|\n| `speed`     | Increase or decrease the speed of animation applied to the distortion on your text | number |\n| `rotation`     | Change the rotation of distortion effect      |  number |\n| `distortX` | update the horizontal position in which the distortion effect will be applied      |    number |\n| `distortY` | update the vertical position in which the distortion effect will be applied      |    number |\n| `noiseAmplitude` | change the noise amplitude (amplitude of toughs and crests)     |    number |\n| `noiseVolatility` | describes the overall change your text will experience     |    number |\n\nI'll recommend reading [this](https://pudding.cool/2018/02/waveforms/) brilliant piece written by [Josh Comeau](https://www.joshwcomeau.com/) on Waveforms. It will give you a little more idea on how and what values you should use to update the noise amplitude, and change its volatility.\n\n### Flies Text\n\nFlies Text component is based on the [FliesMaterial](https://blotter.js.org/#/materials/FliesMaterial) in Blotter.js\n\n```jsx\nimport { FliesText } from 'react-text-fun';\n\n\u003cFliesText\n  cellRadius={0.5}\n  text=\"Hello World\"\n  fontSize={120}\n  cellWidth={0.02}\n  speed={2}\n  dodge={true}\n  dodgeY={0.05}\n  dodgeSpread={0.08}\n/\u003e\n```\n\n| Prop        | Description           | Type  |\n| ------------- |:-------------:| -----:|\n| `cellWidth`     | Width of a cell | number |\n| `cellRadius`     | Radius of a cell  |  number |\n| `speed` | Animation speed    |    number |\n| `dodge` | whether or not to dodge cells from a position (x-axis or y-axis)     |    boolean |\n| `dodgeX` | dodge position of cells around x-axis    |    number |\n| `dodgeY` | dodge position of cells around y-axis   |    number |\n\n### Split color channel\n\nSplit color channel is based on [ChannelSplitMaterial](https://blotter.js.org/#/materials/ChannelSplitMaterial) in Blotter.js\n\n```jsx\nimport { SplitColorChannelText } from 'react-text-fun';\n\n\u003cSplitColorChannelText\n  text=\"Hello World\"\n  fontSize={120}\n  rotation={5.0}\n  rgbOffset={0.8}\n  addBlur={false}\n  addNoise={true}\n/\u003e\n```\n\n| Prop        | Description           | Type  |\n| ------------- |:-------------:| -----:|\n| `rotation`     | Change the angle of rgb channel splitting | number |\n| `rgbOffset`     | Describes the distance apart the RGB values should spread  |  number |\n| `addBlur` | Add blur to the text    |    boolean |\n| `addNoise` | Add noise distortion to text     |    boolean |\n\n### Liquid distortion text\n\n```jsx\nimport { LiquidDistortionText } from 'react-text-fun';\n\n\u003cLiquidDistortionText\n  text=\"Hello World\"\n  fontSize={120}\n  speed={0.6}\n  volatility={0.02}\n/\u003e\n```\n\n| Prop        | Description           | Type  |\n| ------------- |:-------------:| -----:|\n| `speed`     | Speed of the animation | number |\n| `volatility`     | Describes the change in distortion of a text  |  number |\n\n## Styling text\n\nYou can use the below props with any of the above component to style the text. These are the common props.\n\n| Prop        | Description           | Type  |\n| ------------- |:-------------:| -----:|\n| `id`     | An unique id for the canvas | string |\n| `appendTo`     | Specify an id for an element to which the canvas should be appended | string |\n| `text`     | Text string to render |  string |\n| `fontFamily`     | Set a different font type | string |\n| `fontSize`     | Set the font size |  number |\n| `fontWeight`     | Set the font weight | number |\n| `fill`     | Sets the text color |  string |\n| `fontStyle`     | Specify a font style (italic, normal or bold) | string |\n| `lineHeight`     | Set the line height |  number |\n| `paddingTop`     | Apply top padding | number |\n| `paddingBottom`     | Apply bottom padding |  number |\n| `paddingLeft`     | Apply padding on left side | number |\n| `paddingRight`     | Apply padding on right side |  number |\n\n## Using text canvas\n\nYou can also access the canvas which renders the text using the callback function `get2dContext`. As the prop name suggests, the callback function receives the 2D rendering context for the drawing surface as an argument. This is useful if you want to update the canvas using any other third party library.\n\n`get2dContext` can be used with any of the above material components. For instance, here is an example of how you would use it with `FliesText` component.\n\n```jsx\n\u003cFliesText {...props} get2dContext={ctx =\u003e console.log(ctx)} /\u003e\n```\n\n## Live examples\n\nYou can find the live code examples for all the components on the [codesandbox](https://codesandbox.io/embed/9jvp8n69kw)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-text-fun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-text-fun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-text-fun/lists"}