Screenshot_2021-05-10 Components AI — A new way to explore generative design systems

Components AI - Typefaces

Collection of Google fonts typeface packages for three.js, react-three-fiber, and other tools.

Example usage

Below is an example for using recursive with react-three-fiber.

Install a package

yarn add @compai/font-recursive

Use three's FontLoader

import { useRef, useState, useEffect, Fragment } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import typefaceData from "@compai/font-recursive/data/typefaces/normal-400.json";

const font = new THREE.FontLoader().parse(typefaceData);

Create a component

export const RecursiveText = ({
  size =  1,
  height = 0.2,
  color = "tomato",
  text,
  wireframe = false,
  wireframeLineWidth = 0,
  ...props
}) => {
  const mesh = useRef();

  return (
    <mesh {...props} ref={mesh}}>
      <textGeometry args={[text, { font, size, height }]} />
      <meshStandardMaterial color={color} wireframe={wireframe} wireframeLinewidth={wireframeLinewidth} />
    </mesh>
  );
}

Use the component

const Demo = () => {
  return (
    <Canvas>
      <ambientLight color="#fff" intensity={0.5}/>
      <spotLight position={[10,10,10]} intensity={0.5} color="#d05edb"
      <ABeeZeeText
        text="ABeeZee"
        color="#ff6490"
        size={1}
        height={0.2}
        roughness={1}
        wireframe={false}
        wireframeLinewidth={0}
        position={[0,0,0]}
      />
    </Canvas>
  );
}

Read the full docs →

Development

Below documents how to install dependencies and run the build scripts. If you're looking to use the packages that are already built, check out the typeface documentation.

Installation

Install dependencies for package generation.

yarn

Usage

The build script takes the Google Fonts listing, fetches their ttf font files from the CDN, and then uses opentype.js to convert to a typeface.js format.

The conversion is adapted from facetype.js by @gero3.

yarn build

Release

This project uses changesets to handle versioning and package building.

yarn changeset
yarn version:packages
yarn release

Resources

The following projects were used to aggregate, transform, and curate font data: