https://github.com/origenstudio/react-alphabet-soup

Create super cool text animations based on an alphabet soup concept
https://github.com/origenstudio/react-alphabet-soup

animation animation-css css jss react text-animation

Last synced: 26 days ago
JSON representation

Create super cool text animations based on an alphabet soup concept

• Host: GitHub
• URL: https://github.com/origenstudio/react-alphabet-soup
• Owner: OrigenStudio
• License: mit
• Created: 2019-05-13T14:41:00.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:13:43.000Z (over 2 years ago)
• Last Synced: 2025-05-10T09:03:27.477Z (about 1 month ago)
• Topics: animation, animation-css, css, jss, react, text-animation
• Language: JavaScript
• Homepage: https://react-alphabet-soup.netlify.com
• Size: 2.47 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-alphabet-soup

Yes, `react-instagram-feed` would be a better name but it was taken...

## Quick start

1.  Install 

```sh

npm install --save react-alphabet-soup || yarn add react-alphabet-soup

```

2.  Use the component

```js

//...

  

//...

```

## API

#### Table of Contents

-   [AlphabetSoup](#alphabetsoup)

    -   [Parameters](#parameters)

-   [AlphabetSoupWithDimensions](#alphabetsoupwithdimensions)

    -   [Parameters](#parameters-1)

-   [createStyles](#createstyles)

    -   [Parameters](#parameters-2)

-   [getCenters](#getcenters)

    -   [Parameters](#parameters-3)

-   [getCharHorizontalPos](#getcharhorizontalpos)

    -   [Parameters](#parameters-4)

-   [getCharVerticalPos](#getcharverticalpos)

    -   [Parameters](#parameters-5)

-   [measureText](#measuretext)

    -   [Parameters](#parameters-6)

### AlphabetSoup

This component renders and animates the text as an Alphabet Soup

#### Parameters

-   `props` **Props** 

-   `text` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** text to render

-   `width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** width of the space in pixels (optional, default `100`)

-   `height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** height of the space in pixels (optional, default `100`)

-   `fontSize` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontSize of the text when tidy. (optional, default `'20px'`)

-   `lineHeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** lineHeight of the text when tidy. (optional, default `1.3`)

-   `fontFamily` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontFamily of the text. (optional, default `'Georgia'`)

-   `transitionStyle` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** style of the transition animation. Values: 'constant' | 'progressive' | 'random'. (optional, default `'constant'`)

-   `transitionSpeedMultiplier` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** speed multiplier for the transition. Default transitions take 1s. The multiplier can increase and decrease that. (optional, default `1`)

-   `transitionTimingFunction` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** is the transition timing function used on CSS transition. e.g. ease, ease-in, cubic-bezier(1, 0.24, 0.25, 1), ... (optional, default `'ease'`)

-   `maxIterations` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** maximum number of iterations that the Lloyd's relaxation will run through.

    More iterations mean a more optimal solution, however it can take a lot more time. Less iteration generate less optimal solutions. (optional, default `20`)

-   `acceptableError` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** error that if achieved between iterations the relaxation process will stop, even if the iterations are not completed.

    Bigger error with compute results faster. (optional, default `1e-6`)

-   `sorting` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** sorting applied to the generated points. 'none' no sorting applied. 'sortByX' sort ascending points using X.

    'sortByY' sort ascending points using Y. 'costFunction' sorts points using a cost function like `x + costFunctionYWeight * y`. (optional, default `'none'`)

-   `costFunctionYWeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default `1`)

-   `wrapperClassName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** class name of the wrapper component. (optional, default `''`)

-   `charactersClassName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** class name of the characters. It will be applied to all the characters. (optional, default `''`)

-   `untidyOnHover` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** reverses the behaviour. The text is tidy by default and gets untidy when hover (optional, default `false`)

-   `vertical` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when true, the tidied text renders in vertical. (optional, default `false`)

Returns **any** renders the React component

### AlphabetSoupWithDimensions

This component renders and animates the text as an Alphabet Soup

Same props as AlphabetSoup without width and height which are calculated automatically

#### Parameters

-   `props` **Props** 

Returns **any** renders the React component

### createStyles

Generates the styles for the wrapper and each of the text characters for the animation to happen.

#### Parameters

-   `text` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** text to be rendered. It is used to generate a style for each character.

-   `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object with options (optional, default `{}`)

    -   `options.fontSize` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontSize of the text when tidy (optional, default `'20px'`)

    -   `options.lineHeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** lineHeight of the text when tidy. (optional, default `1.3`)

    -   `options.fontFamily` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontFamily of the text. (optional, default `'Georgia'`)

    -   `options.transitionStyle` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** style of the transition animation. Values: 'constant' | 'progressive' | 'random'. (optional, default `'constant'`)

    -   `options.transitionSpeedMultiplier` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** speed multiplier for the transition. Default transitions take 1s. The multiplier can increase and decrease that. (optional, default `1`)

    -   `options.untidyOnHover` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when true the behaviour is the opposite. (optional, default `false`)

    -   `options.vertical` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when true, the tidied text renders in vertical. (optional, default `false`)

    -   `options.charCenters` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<{x: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), y: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}>** position of the characters before the user hovers them. (optional, default `undefined`)

-   `transitionTimingFunction` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** is the transition timing function used on CSS transition. e.g. ease, ease-in, cubic-bezier(1, 0.24, 0.25, 1), ... (optional, default `'ease'`)

Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** 

### getCenters

This is a function that calculates a set of points evenly distributed in a defined space.

It uses the Lloyd's relaxation on a Voronoi diagram to distribute the points.

#### Parameters

-   `numberOfCenters` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the number of points that need to be distributed in the space.

-   `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object with options (optional, default `{}`)

    -   `options.width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** height of the space (optional, default `100`)

    -   `options.height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** height of the space (optional, default `100`)

    -   `options.maxIterations` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** maximum number of iterations that the Lloyd's relaxation will run through.

        More iterations mean a more optimal solution, however it can take a lot more time. Less iteration generate less optimal solutions. (optional, default `20`)

    -   `options.acceptableError` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** error that if achieved between iterations the relaxation process will stop, even if the iterations are not completed.

        Bigger error with compute results faster. (optional, default `1e-6`)

    -   `options.sorting` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** sorting applied to the generated points. 'none' no sorting applied. 'sortByX' sort ascending points using X.

        'sortByY' sort ascending points using Y. 'costFunction' sorts points using a cost function like `x + costFunctionYWeight * y`. (optional, default `'none'`)

    -   `options.costFunctionYWeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default `1`)

Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<{x: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), y: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}>>** returns a Promise that when resolved returns an array with the points positions

### getCharHorizontalPos

This function return the CSS `left` parameter for the characters of the input index.

Currently the makes the text to be centered on the space.

#### Parameters

-   `index` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of the characters to calculate the CSS `left` parameter

-   `totalWidth` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** total width of the text to render

-   `partialWidths` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** array with the width of each character sorted by index position.

### getCharVerticalPos

This function return the CSS `top` and `left` parameter for the characters of the input index.

Currently the makes the text to be centered on the space.

#### Parameters

-   `index` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of the characters

-   `totalHeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** total height of the text to render

-   `partialHeights` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** array with the width of each character sorted by index position.

-   `partialWidths` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** 

### measureText

Measures the widths and the height of a text

#### Parameters

-   `text` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** text to be measured or array with multiple lines of text.

-   `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object with options (optional, default `{}`)

    -   `options.fontSize` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontSize of the text. (optional, default `'20px'`)

    -   `options.lineHeight` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** lineHeight of the text. (optional, default `1.3`)

    -   `options.fontFamily` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontFamily of the text. (optional, default `'Georgia'`)

    -   `options.fontWeight` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontWeight of the text. (optional, default `400`)

    -   `options.fontStyle` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontStyle of the text. (optional, default `'normal'`)

    -   `options.canvas` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** canvas used to render the text to measure. If none provided, one us created and used. (optional, default `createdbydefault`)

Returns **{text: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), width: {value: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), units: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)}, height: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)}** returns an object with the width, height and the text or longest text in case

of multiline.

## License

MIT © [Origen Studio](https://github.com/origenstudio)

Contribute

Package generated using [Nod](https://npmjs.org/package/generator-nod)

## Features

-   [**Babel**](https://babeljs.io/) - Write next generation JavaScript today.

-   [**Jest**](https://facebook.github.io/jest) - JavaScript testing framework used by Facebook.

-   [**ESLint**](http://eslint.org/) - Make sure you are writing a quality code.

-   [**Prettier**](https://prettier.io/) - Enforces a consistent style by parsing your code and re-printing it.

-   [**Flow**](https://flowtype.org/) - A static type checker for JavaScript used heavily within Facebook.

-   [**Travis CI**](https://travis-ci.org) - Automate tests and linting for every push or pull request.

-   [**Documentation**](http://documentation.js.org/) - A documentation system so good, you'll actually write documentation.

-   [**Conventional Changelog**](https://github.com/conventional-changelog/conventional-changelog) - Generate a changelog from git metadata.

## Commands

```sh

$ yarn test # run tests with Jest

$ yarn run coverage # run tests with coverage and open it on browser

$ yarn run lint # lint code

$ yarn run docs # generate docs

$ yarn run build # generate docs and transpile code

```

### Publish

```sh

$ yarn run version patch|minor|major

$ yarn publish

```

It'll automatically run `test`, `lint`, `docs`, `build`, generate `CHANGELOG.md`, and push commits and tags to the remote repository.