Shader Atlas
한국어
▣ Media input

Text

텍스트

Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture.

Also known as: Texttext texturetext layerglyph texture

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Text } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Text
        fontFamily="Arial"
        fontSize={0.16}
        fontWeight={700}
        text="Shader Atlas" />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Text } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Text
      font-family="Arial"
      :font-size="0.16"
      :font-weight="700"
      text="Shader Atlas"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Text } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Text
    fontFamily="Arial"
    fontSize={0.16}
    fontWeight={700}
    text="Shader Atlas" />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Text } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Text
        fontFamily="Arial"
        fontSize={0.16}
        fontWeight={700}
        text="Shader Atlas" />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Text',
      props: {
        fontFamily: 'Arial',
        fontSize: 0.16,
        fontWeight: 700,
        text: 'Shader Atlas',
      },
    }
  ]
}, { disableTelemetry: true })

Props · Text

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
textTextHello World—The text to display (single line)
fontFamilyFontSet in codeInter—Google Fonts family name
fontWeightWeightSet in code400—Font weight (only weights published for the family render true; others are synthesized)
italicItalicfalse—Italic style
textTransformTransformnonenone · uppercase · lowercase · capitalizeCase transformation applied to the text
fontSizeSize0.070.01 – 0.5 (step 0.005)Font size as a fraction of canvas height
letterSpacingLetter Spacing0-0.1 – 0.5 (step 0.005)Letter spacing in em units
lineHeightLine Height1.20.8 – 2.5 (step 0.05)Line height as a multiple of font size (multi-line text)
textAlignAligncenterleft · center · rightHorizontal alignment of lines within the text block
widthMax Width00 – 1 (step 0.005)Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto/Fixed width toggle and the side drag handles, not a slider.
colorColor#ffffff—Text color
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the text
rotationRotation00 – 360 (step 1)Rotation in degrees

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

HTML In Canvas캔버스 속 HTML

Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Image Texture이미지 텍스처

Display an image with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Video Texture비디오 텍스처

Display a video with customizable playback and object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Webcam Texture웹캠 텍스처

Display a live webcam feed with customizable object-fit modes.

Think of a title printed on a poster: the text is drawn on the canvas and can be recolored, distorted, or blurred like other shader layers.

Set the copy with `text` and choose a typeface with `fontFamily` (default `Inter`). `fontSize` is a fraction of canvas height, defaulting to `0.07` with a range of `0.01`–`0.5`. `width` controls wrapping; its default `0` fits the content automatically, and its range is `0`–`1`. `textAlign` places multiple lines left, center, or right.

Text draws on its own, so later effects can target the lettering. For body copy that people need to select, copy, or hear through a screen reader, provide real HTML text too; canvas lettering does not replace document text.

When to use

Use it for short titles and labels, kinetic typography, or lettering that needs gradients and distortions. Avoid long copy or content that must remain searchable, selectable, and exposed as text to assistive technology.

Open as page ↗