filipeestacio / variable-font

A React port of a beautiful codepen by Juan Fuentes, showcasing a variable font that moves in relation to the mouse position

React Variable Font

This is a port to React of a beautiful codepen by Juan Fuentes that I found when researching variable fonts.

Click here to try it out in codesandbox!

Built with

• React
• Styled Components

Installation

1. Clone the repo

git clone https://github.com/filipeestacio/variable-font.git

2. Install npm packages

npm install

3. Start the app

npm run start

4. Open App.js and change the values in the props. The prop "text" accepts a string, all others accept booleans.

<Text
  text="Hello World"
  isScale={true}
  isFlex={true}
  isAlpha={true}
  isWidth={true}
  isWeight={true}
  isItalic={true}
/>

License

Distributed under the MIT License.

Contact

Filipe Estacio - @filipeestacio

Acknowledgements

• Juan Fuentes