Skip to content

Comments

playground: add Lottie sample#231

Draft
tinyjin wants to merge 1 commit intomainfrom
jinny/playground-lottie-sample
Draft

playground: add Lottie sample#231
tinyjin wants to merge 1 commit intomainfrom
jinny/playground-lottie-sample

Conversation

@tinyjin
Copy link
Member

@tinyjin tinyjin commented Feb 13, 2026

  • renamed the existing Lottie example to Animation to align with thorvg.example
  • added a lottie.ts sample
CleanShot 2026-02-13 at 21 58 46@2x

@tinyjin tinyjin self-assigned this Feb 13, 2026
@tinyjin tinyjin requested a review from hermet as a code owner February 13, 2026 12:59
@tinyjin tinyjin added the example Sample Code / Playground label Feb 13, 2026
Copilot AI review requested due to automatic review settings February 13, 2026 12:59
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the playground showcase to better align with the upstream/native example naming by renaming the existing Lottie playback example to “Animation”, and adds a new “Lottie” grid sample.

Changes:

  • Renamed the existing Lottie example to Animation (new id + thumbnail + native example reference).
  • Added a new lottie.ts sample that renders many Lottie animations in a grid.
  • Added a new thumbnail asset for the renamed Animation example.

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 2 comments.

File Description
playground/public/assets/animation-thumbnail.png Adds a thumbnail for the renamed Animation showcase entry.
playground/lib/examples/animation.ts Renames the previous Lottie example to “Animation” and changes its id/thumbnail/reference.
playground/lib/examples/lottie.ts Introduces a new Lottie grid sample that fetches many Lottie JSONs and animates them.
playground/lib/examples/index.ts Wires the renamed Animation example and the new Lottie example into the showcase list.
Comments suppressed due to low confidence (2)

playground/lib/examples/animation.ts:6

  • AnimationExample is exported in PascalCase, but the rest of the examples in this folder use lowerCamelCase (e.g., basicShapesExample, pictureJpgExample). To keep naming consistent and avoid special-casing imports/exports, rename this export to match the established *Example naming pattern and update its import/usage in examples/index.ts.
    playground/lib/examples/animation.ts:5
  • Changing the example id from lottie-animation to animation will break existing deep links/bookmarks to /showcase/lottie-animation and any saved state keyed by the old id. Consider keeping the old id (and only updating title/thumbnail), or adding an alias/redirect path so both ids resolve to the same example.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@github-actions
Copy link

🚀 Playground preview deployment ready!

🎮 Playground: https://thorvg-playground-qv5auinjg-thorvg-web.vercel.app

- renamed the existing Lottie example to Animation to align with thorvg.example
- added a lottie.ts sample
@tinyjin tinyjin force-pushed the jinny/playground-lottie-sample branch from e958147 to 50b0cea Compare February 13, 2026 14:23
@github-actions
Copy link

🚀 Playground preview deployment ready!

🎮 Playground: https://thorvg-playground-4i5yyvfew-thorvg-web.vercel.app

@hermet hermet marked this pull request as draft February 24, 2026 06:20
@hermet
Copy link
Member

hermet commented Feb 24, 2026

Let's consider adding this after performance stabilization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

example Sample Code / Playground

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants