Tegaki CDN Example

# Web Components > Animate handwriting in any page with the custom element: load it from a CDN, control playback with attributes, and drive it with CSS. Source: https://tegaki.ink/frameworks/web-components/ Tegaki has a `` custom element that works in any browser, without a framework. ## Installation ```sh npm install tegaki ``` ## Setup Register the custom element once, before using it in HTML: ```js import { registerTegakiElement, TegakiEngine } from 'tegaki/wc'; import caveat from 'tegaki/fonts/caveat'; // Register the font bundle so the element can find it by name TegakiEngine.registerBundle(caveat); // Register the custom element registerTegakiElement(); ``` ## Using via CDN You can use Tegaki directly from a CDN without any build tools or package manager. Add a ` ``` To pin a specific version, add it to the URL: ```js import { registerTegakiElement, TegakiEngine } from 'https://esm.sh/tegaki@0.8.0/wc'; import caveat from 'https://esm.sh/tegaki@0.8.0/fonts/caveat'; ``` ### jsDelivr [jsDelivr](https://www.jsdelivr.com/) can serve package files directly via its ESM endpoint: ```html ``` > **Note** > > `esm.run` is jsDelivr's ESM-specific domain. Like esm.sh, it resolves package exports and bundles dependencies. ### Import maps For cleaner imports, use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) to map bare specifiers to CDN URLs: ```html

``` This lets you write the same import paths you'd use with a bundler, while loading from the CDN at runtime. ### Loading font data manually with `createBundle` If the pre-built font bundles don't work in your environment, or you want to load font data from a custom URL, use `createBundle` to assemble a bundle from its parts: ```html ``` This is also useful for loading custom font bundles generated with the [studio](https://tegaki.ink/studio/). ### Full standalone example A complete HTML file you can save and open in a browser: ```html Tegaki CDN Example

``` ## Basic example ```html ``` The element uses Shadow DOM internally. Style the host element with `font-size` and `color` as usual; the renderer inherits them. ## Text content You can set the text via the `text` attribute or as the element's text content: ```html

Hello World ``` ## Controlled time Set the `time` attribute to a number to control the animation manually: ```html ``` ## Playback attributes Control uncontrolled playback via attributes: ```html

``` ## Effects Effects are objects and can't be expressed as attributes. Use the `effects` property instead: ```js const el = document.querySelector('tegaki-renderer'); el.effects = { glow: { radius: 8, color: '#00ccff' }, pressureWidth: true, strokeGradient: { colors: 'rainbow' }, }; ``` ## Playback controls The element exposes playback methods and read-only properties: ```js const el = document.querySelector('tegaki-renderer'); el.play(); el.pause(); el.seek(1.5); // jump to 1.5 seconds el.restart(); el.currentTime; // current playback time (seconds) el.duration; // total animation duration (seconds) el.isPlaying; // whether animation is running el.isComplete; // whether animation has finished ``` ## Accessing the engine For advanced use cases, the underlying `TegakiEngine` instance is available: ```js const el = document.querySelector('tegaki-renderer'); const engine = el.engine; engine.update({ timing: { charDuration: 0.5 } }); ``` ## CSS time mode Use `time="css"` to drive the animation from CSS custom properties: ```html ``` See the [Rendering Animations](https://tegaki.ink/guides/rendering/#css-time-mode) guide for details. ## Custom tag name Custom element names [must contain a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) per the HTML spec. The default is `tegaki-renderer`, but you can choose any valid name: ```js registerTegakiElement('my-handwriting'); ``` ```html ``` ## Attributes reference | Attribute | Type | Description | |---|---|---| | `text` | `string` | Text to render. Falls back to `textContent` if not set. | | `font` | `string` | Registered bundle name (see `TegakiEngine.registerBundle`). | | `time` | `number \| "css"` | Controlled time in seconds, or `"css"` for CSS mode. Omit for uncontrolled. | | `speed` | `number` | Playback speed multiplier (default `1`). | | `playing` | `"true" \| "false"` | Whether animation is playing (default `true`). | | `loop` | _boolean attribute_ | Loop animation when it finishes. | | `reduced-motion` | `"never" \| "user" \| "always"` | Whether to honour reduced motion by showing the text finished (default `"never"`; see [`reducedMotion`](https://tegaki.ink/api/renderer/#reducedmotion)). | | `pixel-ratio` | `number` | Supersampling factor on top of devicePixelRatio (shortcut for `quality.pixelRatio`). | | `segment-size` | `number` | Max drawn segment length in CSS pixels (shortcut for `quality.segmentSize`). | | `seed` | `number \| "random"` | What random choices come from: wobble, gradients, plugins (default `0`; see [`seed`](https://tegaki.ink/api/renderer/#seed)). The element's `engine.seed` is the number it drew with. | | `show-overlay` | _boolean attribute_ | Show debug text overlay. | | `fallback-font` | `string` | CSS font-family list for characters the bundle has no stroke data for (see [`fallbackFont`](https://tegaki.ink/api/renderer/#fallbackfont)). | ## Properties reference These properties are set via JavaScript and support object values that can't be expressed as attributes: | Property | Type | Description | |---|---|---| | `font` | `TegakiBundle \| string` | Font bundle object or registered name. | | `effects` | `TegakiEffects` | Visual effects configuration. | | `timing` | `TimelineConfig` | Timeline timing configuration. | | `quality` | `TegakiQuality` | Render-quality knobs (`pixelRatio`, `segmentSize`). | | `onComplete` | `() => void` | Callback when animation completes. | | `engine` | `TegakiEngine` _(read-only)_ | The underlying engine instance. | For the full options reference, see the [TegakiRenderer API docs](https://tegaki.ink/api/renderer/).