Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Overview

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.

Read the docs β†’

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

{ const mesh = useRef(); return ( ); } ">
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:

Issues
Owner
Components AI
Experimental computational design platform for exploring generative space
Components AI
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
Article converter is an api for getting a extended html version of the content attribute provided by Article API.

Article converter is an api for getting a extended html version of the content attribute provided by Article API.

NDLA 2 Oct 6, 2021
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
πŸ€– React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 186 Sep 21, 2021
Because your state management code should be domain-agnostic.

Because your state management code should be domain-agnostic.

Zachary DeRose 3 Oct 6, 2021
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 109 Oct 14, 2021
A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

Mauro Cano 1 Oct 9, 2021
Detect device, and render view according to detected device type.

react-device-detect Detect device, and render view according to the detected device type. Installation To install, you can use npm or yarn: npm instal

Michael Laktionov 1.6k Oct 14, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
@custom-elements-manifest/analyzer plugin to ✨ automatically ✨ create react wrappers for your custom elements

cem-plugin-reactify @custom-elements-manifest/analyzer plugin to automatically create React wrappers for your custom elements based on your custom ele

Pascal Schilp 7 Oct 6, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App πŸπŸ“±

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 82 Oct 13, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

MatΔ›j KΕ™Γ­ΕΎ 343 Oct 3, 2021
A ReactJS password recovery box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Boia Alexandru 2 Sep 20, 2021
πŸ“ A resizable component for React.

?? A resizable component for React.

bokuweb 1.5k Oct 17, 2021
Extended utils for βš›οΈ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 183 Oct 5, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021