Learn VELATO with Real Code Examples

Add `velato = "^0.6"` in Cargo.toml dependencies

Ensure Rust toolchain is up‑to‑date (Rust 1.85+)

For desktop: set up winit (or other windowing backend) + Vello dependencies

For web: add wasm32-unknown-unknown target, configure build with wasm‑bindgen / cargo-run‑wasm

Include Lottie JSON animation files as assets or via embed (e.g. `include_str!`)

Rust toolchain (1.85 or newer)

GPU-supported environment (for Vello rendering)

For web: browser with WebGPU support (or development version enabling WebGPU)

Asset pipeline for Lottie JSON files

Optional: build tools for wasm (wasm-bindgen, wasm-pack)

Cargo.toml - dependencies including velato, vello, winit or wasm-bindgen

src/main.rs (or lib.rs) - application code

assets/ - Lottie JSON animation files

wasm glue / index.html (for web build) - if targeting wasm/web

(Optional) CSS/HTML - if integrating with Web front-end for embedding

cargo run - build and run desktop app

cargo build --target wasm32-unknown-unknown + wasm-pack / wasm-bindgen - build for web

cargo test - run any test suites

cargo update - update dependencies (Velato, Vello, etc.)

Use nightly toolchain if required for WebGPU or experimental features

Animations themselves are language-agnostic (vector graphics, no text handling in Lottie JSON supported yet)

Text layers in Lottie are unsupported - so localization of animated text requires manual handling (e.g. separate UI overlays)

For web apps: localized UI outside animation can handle i18n

For native apps: UI strings managed by app logic, not animation

No built-in i18n - up to developer to handle localization layers

As vector graphics + Rust, accessibility (e.g. screen readers) depends on how UI is built - Velato itself focuses on rendering

For web builds: developers responsible for HTML overlay, semantic tags, ARIA attributes

For desktop/native: accessibility depends on UI framework layering Velato output

Animations should avoid excessive flashing or motion for sensitive users

Developers should provide fallback static content or respects user preference for reduced motion

Styling via vector graphics (fills, strokes) defined in Lottie JSON

Additional styling via custom Rust drawing or CSS/HTML (in web builds)

Supports transformations (scale, translate, rotate) via Vello scene graph

Alpha/compositing and layering via Vello renderer

No CSS-in-JS system - styling purely via vector rendering or web overlay

Animation state managed via current frame/time index in render loop

Scene graph maintained by Vello between frames if needed

Custom state for user interaction (e.g. hover, click) handled in application code

No global mutable state required by Velato itself - Rust borrow checker ensures safety

Optionally integrate with other state managers if building larger app

Animation data: parsed Lottie JSON stored as Composition

Assets: images/fonts loaded if needed separately (Velato currently lacks image-layer support)

No external database - asset‑based application

Custom data (e.g. user input) handled by application logic separately

Memory management via Rust rather than garbage-collected runtime