### React Quick Start Example Source: https://github.com/kurtgokhan/tegaki/blob/main/README.md A basic React component demonstrating how to use TegakiRenderer with a built-in font. Ensure the 'tegaki' package is installed. ```tsx import { TegakiRenderer } from 'tegaki'; import caveat from 'tegaki/fonts/caveat'; function App() { return ( Hello World ); } ``` -------------------------------- ### Run Example App Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/nuxt.mdx Instructions to clone and run the example Nuxt application from the Tegaki repository. ```sh bun install bun --filter @tegaki/example-nuxt dev ``` -------------------------------- ### Use Tegaki from CDN via esm.sh Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Integrate Tegaki using a CDN for quick setup without build tools. This example uses esm.sh to serve the modules. ```html ``` -------------------------------- ### Clone Repository and Install Dependencies Source: https://github.com/kurtgokhan/tegaki/blob/main/CONTRIBUTING.md Clone the Tegaki repository and install its dependencies using Bun. This sets up the project environment for development. ```bash git clone https://github.com/KurtGokhan/tegaki.git cd tegaki bun install ``` -------------------------------- ### Install Tegaki via npm Source: https://github.com/kurtgokhan/tegaki/blob/main/README.md Install the Tegaki package using npm. This is the first step to using Tegaki in your project. ```bash npm install tegaki ``` -------------------------------- ### Install HyperFrames Skills Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/AGENTS.md Install the necessary AI agent skills for the HyperFrames framework. This command adds framework-specific patterns for composition. ```bash npx skills add heygen-com/hyperframes ``` -------------------------------- ### Full Standalone Tegaki CDN Example Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx A complete HTML file demonstrating Tegaki usage via CDN, suitable for direct use in a browser. It includes the necessary imports and element registration. ```html Tegaki CDN Example ``` -------------------------------- ### Initialize TegakiEngine in Vanilla JS Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Basic setup for TegakiEngine with a container, text, font, and uncontrolled time settings. The engine automatically creates DOM elements. ```html
``` -------------------------------- ### Basic SolidJS Tegaki Renderer Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/solid.mdx A simple example demonstrating how to render text with a specified font and uncontrolled animation settings. Ensure 'tegaki/solid' and the font bundle are imported. ```tsx import { TegakiRenderer } from 'tegaki/solid'; import bundle from 'tegaki/fonts/caveat'; function App() { return ( ); } ``` -------------------------------- ### Basic TegakiRenderer Example Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/nuxt.mdx Demonstrates a simple integration of TegakiRenderer in a Nuxt page, rendering static text with a specified font and uncontrolled animation. ```vue ``` -------------------------------- ### Development Commands for Tegaki Source: https://github.com/kurtgokhan/tegaki/blob/main/CONTRIBUTING.md Execute common development tasks for Tegaki projects using Bun workspace scripts. These commands cover starting the generator, running the dev server, testing, type checking, and linting. ```bash bun start # Run the generator CLI bun dev # Start the website dev server (http://localhost:4321/tegaki/) bun run test # Run tests across all packages bun typecheck # TypeScript checks bun check # Biome lint + format check bun fix # Biome auto-fix (safe + unsafe) bun checks # Everything: lint + format + typecheck + tests ``` -------------------------------- ### Basic React Tegaki Renderer Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/react.mdx Demonstrates the fundamental usage of TegakiRenderer in a React component. Ensure 'tegaki' and 'react-dom' are installed. ```tsx import { TegakiRenderer } from 'tegaki'; import bundle from 'tegaki/fonts/caveat'; function App() { return ( Hello World ); } ``` -------------------------------- ### Streaming Text with Tegaki in SolidJS Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/solid.mdx Example of rendering text that animates in a streaming fashion, suitable for dynamic messages. Uses 'uncontrolled' time mode with a higher speed and a 'catchUp' value. Requires 'tegaki/solid' and a font bundle. ```tsx import { TegakiRenderer } from 'tegaki/solid'; import bundle from 'tegaki/fonts/caveat'; function StreamingMessage(props: { text: string }) { return ( ); } ``` -------------------------------- ### Framework-Specific Imports Source: https://github.com/kurtgokhan/tegaki/blob/main/README.md Import TegakiRenderer based on your framework. This example shows imports for React, Svelte, Vue, and SolidJS. ```tsx import { TegakiRenderer } from 'tegaki/react'; // React import { TegakiRenderer } from 'tegaki/svelte'; // Svelte import { TegakiRenderer } from 'tegaki/vue'; // Vue import { TegakiRenderer } from 'tegaki/solid'; // SolidJS ``` -------------------------------- ### Controlled Time Example Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/nuxt.mdx Shows how to control the animation progress of TegakiRenderer using a range input slider, allowing scrubbing through the text animation. ```vue ``` -------------------------------- ### Start Drawing After Delay Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/remotion.mdx Calculates progress to introduce a delay before starting the drawing animation, allowing for a pause before the text appears. ```tsx const {fps} = useVideoConfig(); const delayFrames = fps; // 1s delay const drawFrames = 120; // 2s to draw const progress = Math.max(0, Math.min(1, (frame - delayFrames) / drawFrames)); ``` -------------------------------- ### Tegaki Font Bundle Imports Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/bundlers.mdx Example of how Tegaki's font bundles use ESM import-attributes syntax to load assets like font URLs and glyph data. ```typescript // inside tegaki/fonts//bundle.ts (and any bundle the generator produces) import fontUrl from './.ttf' with { type: 'url' }; import glyphData from './glyphData.json' with { type: 'json' }; ``` -------------------------------- ### Update Linux Baseline for Text Preview E2E Tests (Docker) Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Updates the Linux baseline snapshots for the text preview end-to-end tests using a Dockerized Playwright environment. This command requires Docker to be installed and is necessary for CI compatibility. Navigate to the 'packages/website' directory before running. ```bash cd packages/website && bun test:e2e:docker:update ``` -------------------------------- ### Controlled Time Animation with TegakiEngine Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Example of using controlled time for animation by manually updating the time property on each frame using `requestAnimationFrame`. ```js const engine = new TegakiEngine(container, { text: 'Controlled', font: bundle, time: 0, }); let t = 0; function animate() { t += 0.016; engine.update({ time: t }); requestAnimationFrame(animate); } animate(); ``` -------------------------------- ### Basic TegakiRenderer Usage in Vue Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vue.mdx Demonstrates the fundamental setup for using the TegakiRenderer component in a Vue 3 application. Imports the necessary renderer and font bundle, then renders static text with basic time and style configurations. ```vue ``` -------------------------------- ### Accessing Tegaki Renderer Handle in SolidJS Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/solid.mdx Shows how to get a reference to the TegakiRenderer's handle using a callback ref. This handle provides access to the underlying TegakiEngine instance and the container element. Requires 'TegakiRendererHandle' type. ```tsx import { TegakiRenderer, type TegakiRendererHandle } from 'tegaki/solid'; import bundle from 'tegaki/fonts/caveat'; function App() { let handle: TegakiRendererHandle; return ( (handle = h)} font={bundle} text="Hello World" time={{ mode: 'uncontrolled', speed: 1 }} style={{ 'font-size': '48px' }} /> ); } ``` -------------------------------- ### Drive Animation with CSS Time Mode Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Set the 'time' attribute to 'css' to enable CSS time mode, allowing the animation to be driven by CSS custom properties. Refer to the rendering guide for detailed setup. ```html ``` -------------------------------- ### Registering and Using a Font Bundle in Astro Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/astro.mdx Demonstrates how to register a font bundle once and then use it by name across multiple components to avoid data duplication. Includes an option to preload the font. ```astro --- import TegakiRenderer from 'tegaki/astro'; import bundle from 'tegaki/fonts/caveat'; --- ``` ```astro ``` -------------------------------- ### Basic Astro Component Usage Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/astro.mdx Renders 'Hello World' with the Caveat font using the Tegaki Astro component. Suitable for simple text animations. ```astro --- import TegakiRenderer from 'tegaki/astro'; import bundle from 'tegaki/fonts/caveat'; --- ``` -------------------------------- ### React TegakiRenderer Usage Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/rendering.mdx Integrate TegakiRenderer in a React application to display handwriting animations. Ensure the 'tegaki' package is installed. ```tsx import { TegakiRenderer } from 'tegaki'; import bundle from 'tegaki/fonts/caveat'; Hello World ``` -------------------------------- ### Run Darwin Text Preview E2E Tests Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Executes the text preview end-to-end tests on the local Darwin environment. Ensure you are in the 'packages/website' directory. ```bash bun test:e2e ``` -------------------------------- ### Register Font Bundle Globally Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Shows how to register a font bundle globally using `TegakiEngine.registerBundle()` for easy referencing by name in subsequent initializations. ```js import { TegakiEngine } from 'tegaki/core'; import caveat from 'tegaki/fonts/caveat'; TegakiEngine.registerBundle(caveat); // Later, anywhere in your app: const engine = new TegakiEngine(container, { text: 'Hello', font: 'Caveat', // resolved from the registry }); ``` -------------------------------- ### Pre-render Elements with TegakiEngine for SSR Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Illustrates server-side rendering using `TegakiEngine.renderElements()` to generate HTML on the server and adopt it on the client for initial rendering. ```js import { TegakiEngine } from 'tegaki/core'; // Server: render to HTML string const html = TegakiEngine.renderElements( { text: 'Hello', font: bundle }, (tag, props, ...children) => { // your HTML string builder }, ); // Client: adopt pre-rendered DOM const engine = new TegakiEngine(container, { adopt: true, text: 'Hello', font: bundle }); ``` -------------------------------- ### Tegaki Agent Processing Pipeline Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md The sequence of operations performed by the Tegaki agent for each glyph, starting from font download and ending with JSON output. ```text Font download -> Parse (opentype.js) -> Flatten beziers -> Rasterize -> Skeletonize -> Trace -> Compute width -> Order strokes -> JSON output ``` -------------------------------- ### Run Linux Text Preview E2E Tests (Docker) Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Executes the text preview end-to-end tests using the Dockerized Playwright environment for Linux. This command requires Docker. Ensure you are in the 'packages/website' directory. ```bash bun test:e2e:docker ``` -------------------------------- ### HyperFrames Project Commands Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/AGENTS.md Common commands for developing, checking, rendering, and publishing HyperFrames compositions. Use 'npm run check' after making changes to lint and validate. ```bash npm run dev # preview in browser (studio editor) npm run check # lint + validate + inspect npm run render # render to MP4 npm run publish # publish and get a shareable link npx hyperframes docs # reference docs in terminal ``` -------------------------------- ### Update TegakiEngine Options Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Demonstrates how to dynamically update the text or effects of an existing TegakiEngine instance using the `update()` method. ```js engine.update({ text: 'New text' }); engine.update({ effects: { glow: { radius: 8, color: '#00ccff' }, }, }); ``` -------------------------------- ### Vanilla JS TegakiEngine Initialization Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/rendering.mdx Initialize the TegakiEngine in plain JavaScript to render handwriting animations. Requires a target DOM element and font bundle. ```js import { TegakiEngine } from 'tegaki/core'; import bundle from 'tegaki/fonts/caveat'; new TegakiEngine(document.getElementById('tegaki'), { text: 'Hello World', font: bundle, time: { mode: 'uncontrolled', speed: 1, loop: true }, }); ``` -------------------------------- ### Basic Tegaki Web Component Usage Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Demonstrates the fundamental usage of the `` custom element with basic attributes. Styles like `font-size` and `color` are inherited by the host element. ```html ``` -------------------------------- ### Run Full Check After Changes Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/AGENTS.md Execute the full linting and validation process for HyperFrames compositions. This command should always be run after creating or editing composition files. ```bash npm run check ``` -------------------------------- ### Tegaki Generator File Structure Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Overview of the directory structure for the Tegaki generator package, highlighting key modules and their functions. ```text packages/generator/src/ index.ts # Public API exports (used by the website's in-browser pipeline) constants.ts # Defaults: resolution (400), chars, font family (Caveat), tolerances cli/ index.ts # CLI entry point (Padrone) index.test.ts # Tests commands/ generate.ts # Generate command: orchestrates the full pipeline and writes the bundle font/ download.ts # Google Fonts download + local .ttf caching parse.ts # opentype.js wrapper processing/ bezier.ts # Bezier curve flattening (adaptive de Casteljau subdivision) rasterize.ts # Scanline fill rasterizer (nonzero winding rule) skeletonize.ts # Zhang-Suen, Guo-Hall, Lee, morphological thin, medial axis voronoi-medial-axis.ts # Voronoi-based medial axis alternative trace.ts # Skeleton pixel tracing + RDP simplification + spur pruning width.ts # Distance transform for stroke width stroke-order.ts # Connected component grouping + heuristic ordering animated-svg.ts # Convert strokes to animated SVG + TSX visualize.ts # Debug visualization (bitmap, skeleton, traces) png.ts # PNG encoding ``` -------------------------------- ### Applying Effects to Tegaki Renderer in SolidJS Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/solid.mdx Demonstrates how to apply various visual effects like glow, pressure width, and stroke gradients to the animated text. Ensure the font bundle is imported. ```tsx ``` -------------------------------- ### Tegaki Project Commands Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Common commands for running the Tegaki CLI, development server, tests, and checks. These commands should be used directly without 'bun run'. ```bash bun start # Run the CLI (generator) bun dev # Watch mode (website) bun run test # Run tests (all packages) bun typecheck # TypeScript checks (all packages) bun check # Biome lint + format check bun fix # Biome auto-fix bun checks # All checks: lint + format + typecheck + tests ``` -------------------------------- ### Configure Tegaki Imports with Import Maps Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Use an HTML import map to define aliases for CDN URLs, allowing for cleaner import paths similar to bundler configurations. ```html ``` -------------------------------- ### Initialize GSAP Timeline for Animation Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/index.html Sets up a GSAP timeline for managing animations. The timeline is initially paused and ready to be controlled. ```javascript window.__timelines = window.__timelines || {}; window.__timelines.main = gsap.timeline({ paused: true }); ``` -------------------------------- ### Unit Testing with Bun Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Unit tests are written in .test.ts files alongside the source code and utilize Bun's built-in test runner. Import from 'bun:test' and use describe/test/expect. ```typescript import { describe, test, expect } from 'bun:test'; describe('shaper-harfbuzz', () => { // ... tests for splitForShaping and isShapingWhitespace ... }); ``` -------------------------------- ### Vanilla JS and Web Components Source: https://github.com/kurtgokhan/tegaki/blob/main/README.md Import core engine for Vanilla JS or register the custom element for Web Components. Use these for non-framework environments. ```ts import { TegakiEngine } from 'tegaki/core'; // Vanilla JS import { registerTegakiElement } from 'tegaki/wc'; // Web Components ``` -------------------------------- ### Import Default Font Bundle Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/getting-started.mdx Import a default font bundle for use with Tegaki. This is the first step in preparing to render handwriting animations. ```tsx import bundle from 'tegaki/fonts/caveat'; ``` -------------------------------- ### Streaming Text Animation with Vanilla JS Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/streaming.mdx Utilize TegakiEngine in vanilla JavaScript for streaming text. Initialize the engine with a container and font, then update the text as chunks arrive from an API. ```js import { TegakiEngine } from 'tegaki/core'; const engine = new TegakiEngine(container, { font: bundle, time: { mode: 'uncontrolled', speed: 4, catchUp: 0.5 }, }); // As chunks arrive: engine.update({ text: accumulatedText }); ``` -------------------------------- ### Use Tegaki from CDN via jsDelivr Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Load Tegaki modules from jsDelivr's ESM endpoint. This method also automatically bundles dependencies. ```html ``` -------------------------------- ### Update Darwin Baseline for Text Preview E2E Tests Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Updates the local Darwin baseline snapshots for the text preview end-to-end tests. Navigate to the 'packages/website' directory before running this command. ```bash cd packages/website && bun test:e2e:update ``` -------------------------------- ### Nuxt Module Options Configuration Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/nuxt.mdx Configure Tegaki module options like auto-import and component prefix in your Nuxt configuration file. ```typescript export default defineNuxtConfig({ modules: ['tegaki/nuxt'], tegaki: { autoImport: true, // register globally (default: true) prefix: '', // component name prefix (default: '') }, }); ``` -------------------------------- ### Tegaki Font Bundle Structure Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md The generate command creates a bundle directory containing the raw font file, compact glyph data, and an auto-generated TypeScript module. ```bash / .ttf # The raw font file, co-located so the bundle is self-contained glyphData.json # Compact per-glyph stroke data (keys shortened for payload size) bundle.ts # Auto-generated module: imports the font + JSON and exports a TegakiBundle ``` -------------------------------- ### Load Font Data Manually with createBundle Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Assemble a Tegaki font bundle manually using `createBundle` if pre-built bundles are unsuitable or if loading from a custom URL. This allows loading font data from specific URLs. ```html ``` -------------------------------- ### Tegaki Website File Structure Source: https://github.com/kurtgokhan/tegaki/blob/main/AGENTS.md Directory structure for the Tegaki website package, including Astro configuration, public assets, and source files for pages and components. ```text packages/website/ astro.config.ts # Astro config — `base: '/tegaki'`, integrations (React, Svelte, Vue, Solid, Starlight), vite aliases (`tegaki@dev`) public/ # Static assets served as-is (favicon, OG card, robots.txt) src/ pages/generator.astro # Mounts components/ GeneratorApp.tsx # The generator UI: glyph inspector + text preview, all state persisted to URL url-state.ts # URL <-> state serialization (short keys, only non-defaults written) LiveDemo.tsx # Embeddable React demo used in docs HomePageExamples.tsx HomePageExamplesLoader.tsx StaticChatDemo.tsx astro/ solid/ svelte/ vanilla/ vue/ wc/ # Per-framework example components referenced from docs content/ docs/ # Starlight MDX/Markdown content content.config.ts # Starlight content collections config assets/ # Logo, images styles/global.css # Tailwind v4 styles (imported via `@tailwindcss/vite`) ``` -------------------------------- ### Astro Integration Source: https://github.com/kurtgokhan/tegaki/blob/main/README.md Import TegakiRenderer for Astro projects. This allows for seamless integration within Astro components. ```astro --- import TegakiRenderer from 'tegaki/astro'; // Astro --- ``` -------------------------------- ### Generate a Changeset Source: https://github.com/kurtgokhan/tegaki/blob/main/CONTRIBUTING.md Create a changeset for changes affecting the published renderer package. This is used for versioning and publishing the 'tegaki' npm package. ```bash bun changeset ``` -------------------------------- ### Render Animation with Web Components Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/getting-started.mdx Use Tegaki as a Web Component. Register the custom element and use it in HTML, passing attributes for configuration. ```html ``` -------------------------------- ### Streaming Text with TegakiRenderer in Svelte Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/svelte.mdx Demonstrates how to stream text dynamically into the TegakiRenderer component, with settings for faster animation speed and catch-up behavior. ```svelte ``` -------------------------------- ### Import HarfbuzzJS for Text Shaping Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/index.html Imports the HarfbuzzJS library for advanced text shaping, essential for complex script rendering. Ensure the correct path to the WASM file is provided. ```javascript import hb from "harfbuzzjs/hb.js"; import hbjs from "harfbuzzjs/hbjs.js"; ``` -------------------------------- ### Basic Handwriting Composition Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/remotion.mdx Renders a static text animation using Tegaki within a Remotion Composition. It maps the Remotion frame to Tegaki's controlled progress. ```tsx import { Composition, useCurrentFrame, useVideoConfig } from 'remotion'; import { TegakiRenderer } from 'tegaki'; import caveat from 'tegaki/fonts/caveat'; const Handwriting: React.FC = () => { const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); const progress = frame / durationInFrames; return (
); }; export const RemotionRoot: React.FC = () => { return ( ); }; ``` -------------------------------- ### Apply Multiple Effects with TegakiEngine Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Configures TegakiEngine with multiple visual effects including glow, pressure-sensitive width, and a rainbow stroke gradient. ```js const engine = new TegakiEngine(container, { text: 'Fancy effects', font: bundle, time: { mode: 'uncontrolled', speed: 1, loop: true }, effects: { glow: { radius: 8, color: '#00ccff' }, pressureWidth: true, strokeGradient: { colors: 'rainbow' }, }, }); ``` -------------------------------- ### Tegaki Controlled Time Configuration Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/rendering.mdx Set up 'controlled' time mode in Tegaki to manually provide the animation's current time value, useful for synchronizing with external states. ```ts time: 2.5 // seconds // or time: { mode: 'controlled', value: 2.5 } ``` -------------------------------- ### Applying Effects to Tegaki Animation in Vue Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vue.mdx Illustrates how to apply visual effects like glow, pressure-sensitive stroke width, and color gradients to the Tegaki animation. These effects are configured via the `effects` prop. ```vue ``` -------------------------------- ### Import TegakiRenderer for Different Frameworks Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/api/renderer.mdx Import the TegakiRenderer component based on your framework. The core TegakiEngine is available for Vanilla JS. ```tsx import { TegakiRenderer } from 'tegaki'; // React import { TegakiRenderer } from 'tegaki/svelte'; // Svelte import { TegakiRenderer } from 'tegaki/vue'; // Vue import { TegakiRenderer } from 'tegaki/solid'; // SolidJS import TegakiRenderer from 'tegaki/astro'; // Astro import { TegakiEngine } from 'tegaki/core'; // Vanilla JS ``` -------------------------------- ### Register Nuxt Module Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/nuxt.mdx Add the Tegaki module to your Nuxt configuration to enable its features. ```typescript export default defineNuxtConfig({ modules: ['tegaki/nuxt'], }); ``` -------------------------------- ### Basic TegakiRenderer in Svelte Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/svelte.mdx Demonstrates the basic usage of the TegakiRenderer component in Svelte, rendering static text with a specified font and uncontrolled time settings. ```svelte ``` -------------------------------- ### Access and Update the Tegaki Engine Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx For advanced customization, you can access the underlying TegakiEngine instance via the 'engine' property. This allows for fine-grained control over rendering and timing configurations. ```js const el = document.querySelector('tegaki-renderer'); const engine = el.engine; engine.update({ timing: { charDuration: 0.5 } }); ``` -------------------------------- ### Apply Visual Effects with JavaScript Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Effects such as glow, pressure sensitivity, and stroke gradients are configured using the 'effects' property in JavaScript, as they cannot be expressed as attributes. ```js const el = document.querySelector('tegaki-renderer'); el.effects = { glow: { radius: 8, color: '#00ccff' }, pressureWidth: true, strokeGradient: { colors: 'rainbow' }, }; ``` -------------------------------- ### Pin Tegaki Version from CDN Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Specify a particular version of Tegaki when loading from a CDN by appending the version number 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'; ``` -------------------------------- ### Vite OptimizeDeps Configuration Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/bundlers.mdx Configuration for Vite to exclude 'tegaki' from its pre-bundling process in development mode. This ensures that asset references in Tegaki's bundles are handled correctly by Vite's normal asset pipeline. ```typescript import { defineConfig } from 'vite'; export default defineConfig({ // ... optimizeDeps: { exclude: ['tegaki'], }, }); ``` -------------------------------- ### Registering Timelines with GSAP Source: https://github.com/kurtgokhan/tegaki/blob/main/examples/hyperframes/CLAUDE.md This snippet shows how to register a GSAP timeline for a composition. Ensure the timeline is paused and assigned to the window.__timelines object. ```javascript window.__timelines = window.__timelines || {}; window.__timelines["composition-id"] = gsap.timeline({ paused: true }); ``` -------------------------------- ### Register Tegaki Custom Element Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Register the `` custom element and its fonts. This should be done once before using the element. ```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(); ``` -------------------------------- ### Tegaki Effects Configuration Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/rendering.mdx Apply various visual effects to Tegaki animations, such as glow, wobble, and stroke gradients. Effects can be configured with specific parameters or enabled with default values. ```ts effects: { glow: { radius: 8, color: '#00ccff' }, wobble: { amplitude: 1.5, frequency: 8 }, pressureWidth: { strength: 1 }, taper: { startLength: 0.15, endLength: 0.15 }, strokeGradient: { colors: 'rainbow' }, } ``` -------------------------------- ### Import Custom Font Bundle Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/getting-started.mdx Import a custom font bundle generated from a Google Font. This allows for greater flexibility in font selection. ```tsx import bundle from './output/my-font/bundle'; ``` -------------------------------- ### Configure Playback Attributes Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx Control uncontrolled playback behavior using attributes like 'speed' and 'loop'. You can also set 'playing' to 'false' to pause the animation initially. ```html ``` -------------------------------- ### Destroy TegakiEngine Instance Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vanilla.mdx Properly cleans up TegakiEngine resources, including event listeners and animation loops, by calling the `destroy()` method. ```js engine.destroy(); ``` -------------------------------- ### Tegaki CSS Time Configuration Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/guides/rendering.mdx Utilize the 'css' time mode for Tegaki animations, driving the animation purely through CSS for optimal performance without a JavaScript animation loop. ```ts time: 'css' // or time: { mode: 'css' } ``` -------------------------------- ### TegakiRenderer with Effects in Svelte Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/svelte.mdx Illustrates how to apply various visual effects like glow, pressure width, and stroke gradients to the rendered text using the TegakiRenderer component. ```svelte ``` -------------------------------- ### Webpack Configuration for TTF Files Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/remotion.mdx Overrides Remotion's Webpack configuration to inline TTF font files as data URLs, resolving issues with Remotion Studio's dev server. ```ts // remotion.config.ts import { Config } from '@remotion/cli/config'; Config.overrideWebpackConfig((config) => { return { ...config, module: { ...config.module, rules: [ ...(config.module?.rules ?? []).filter((rule) => { if (typeof rule !== 'object' || !rule || !rule.test) return true; const test = rule.test; return !(test instanceof RegExp && test.test('a.ttf')); }), { test: /\.ttf$/, type: 'asset/inline', }, ], }, }; }); ``` -------------------------------- ### Streaming Text Animation with Tegaki in Vue Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/vue.mdx Configures the TegakiRenderer for streaming text effects. Uses the `catchUp` option to control how quickly the animation follows the text, suitable for dynamic content. ```vue ``` -------------------------------- ### Imperative Handle for React TegakiRenderer Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/react.mdx Shows how to access the TegakiRenderer's instance methods and properties using a ref. This allows for imperative control over the animation engine and access to the container element. ```tsx import { useRef } from 'react'; import { TegakiRenderer, type TegakiRendererHandle } from 'tegaki'; import bundle from 'tegaki/fonts/caveat'; function App() { const ref = useRef(null); return ( Hello World ); } ``` -------------------------------- ### Controlled Time Animation in Svelte Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/svelte.mdx Shows how to control the animation time of the TegakiRenderer component using a reactive variable, allowing for scrubbing and interactive control. ```svelte ``` -------------------------------- ### Set Text Content for Tegaki Renderer Source: https://github.com/kurtgokhan/tegaki/blob/main/packages/website/src/content/docs/frameworks/web-components.mdx You can set the text to be rendered either via the 'text' attribute or as the element's text content. The 'text' attribute takes precedence if both are provided. ```html Hello World ```