Examples

The repo ships a demo app (packages/example) with 18 live scenes covering the whole API surface. Run them on a device or simulator:

git clone https://github.com/sanjiguan111/scumble && cd scumble
pnpm install
pnpm example:ios      # or: android

Every demo is a single self-contained component under packages/example/src/demos/ — the table below links each one to its source and to the guide page that explains the topic.

Demo	What it shows	Source	Guide
Shapes	Circle · Rect · RRect · fill/stroke · opacity	ShapesDemo.tsx	Shapes
Gradient	Linear · radial · sweep · conical · gradient stroke	GradientDemo.tsx	Gradients
Paths	SVG d · Path2D · arcs · path trim animation	PathsDemo.tsx	Shapes
Animation	Native interpolation · zero JS per frame	AnimationDemo.tsx	Animation
Playback	createAnimation().controller · pause / seek / finish	PlaybackDemo.tsx	Playback control
Path Ops	Path2D.op — union · intersect · difference · xor	PathOpsDemo.tsx	Shapes
Filters	Blur · DropShadow · ColorMatrix · ColorBlend · MaskBlur	FiltersDemo.tsx	Filters
Transform	translate · scale · rotate · nested groups · matrix	TransformDemo.tsx	Transforms & clipping
Clip	ClipRect · ClipRRect · ClipPath · difference · paint inheritance	ClipDemo.tsx	Transforms & clipping
Multi-Paint	Multi-<Paint> passes · per-pass opacity/blendMode/dash	MultiPaintDemo.tsx	Painting
Paint	stroke cap/join/width · dash · fillRule	PaintDemo.tsx	Painting
Blend	multiply · screen · difference · Group inheritance	BlendDemo.tsx	Painting
Interactive	tap to recolor · mount/unmount · JS-driven progress	InteractiveDemo.tsx	Animation
Viewport	viewPort scaling compared side by side	ViewportDemo.tsx	Canvas & viewPort
Image	data URI · http(s) · seven fit modes · sampling · async decode	ImageDemo.tsx	Images
ImageShader	Bitmap fills · repeat/mirror/decal · textured stroke	ImageShaderDemo.tsx	Gradients
Paragraph	Rich text · wrapping & alignment · maxLines · onLayout	ParagraphDemo.tsx	Text
BiDi	RTL · auto-detection · mixed-direction runs · visual alignment	BiDiDemo.tsx	Text