@remotion/effects: Add cylinder() and sphere() projections

[JonnyBurger]

Adds cylinder() and sphere() to @remotion/effects using WebGPU. Both project canvas content onto a rotating surface with radius, position, three-axis orientation, front/back face selection, and transparency-preserving shading. Shared WebGPU resources are reused across frames.

Includes interactive effect demos, documentation for 4.0.537, Studio catalog entries, and rendered preview assets. Cylinder also has a reusable Cylinder Text element using absolute-fill and plain text inside HtmlInCanvas. Sphere has an eight-second globe demo and a reusable Spinning Globe element in the Maps category. Both globe demos rotate only around the Y axis. The element exposes rotation speed, starting longitude, shading, and an image source, and copies the texture into the installed project.

The globe uses Natural Earth II shaded relief and water, converted to a 4096 × 2048 JPEG and rehosted on remotion.media. Its public-domain terms explicitly say attribution is unnecessary. Source and license links are retained in code; no attribution overlay appears in the demo.

Projection reference: Effectcraft perspective effects.

Validation:

• bun run build
• bun run stylecheck
• Existing effects suite: 542 tests passed
• Element gallery suite: 60 tests passed
• Checked sphere parameter validation and cache keys
• Rendered the 240-frame globe animation and inspected its still image
• Confirmed cylinder output is pixel-identical after sharing its WebGPU runtime

An additional standalone docs TypeScript check reports existing errors elsewhere in the docs; there are no sphere-related diagnostics.

Preview

• Sphere effect and spinning globe
• Cylinder effect and spinning text
• Spinning Globe element
• Cylinder Text element

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
bugs	Ready	Preview	Oct 17, 2026 8:29am UTC
remotion	Ready	Preview	Oct 17, 2026 8:29am UTC

[pullfrog]

ℹ️ No critical issues — one low-stakes note on test coverage.

Reviewed changes

• New cylinder() effect — WebGPU-backed effect under packages/effects/src/cylinder/ (definition + validation, WGSL shader, GPU resource runtime), wired into bundle.ts, the ./cylinder subpath in package.json (exports + typesVersions), and a new @webgpu/types dev dependency + tsconfig.json types.
• Studio catalog and docs — EFFECT_CATALOG entry, effects-demo registry + EffectsCylinderPreview, effects/cylinder.mdx, sidebars.ts, articles.ts, generated article/preview images, and a skills note that cylinder() needs WebGPU.
• Cylinder Text element — editable Element at elements/text/cylinder-text/ registered in element-definitions.ts / element-registry.ts, its docs page, a cylinder-text demo composition, and hosted poster/video previews.

I verified the WGSL uniform packing (48-byte struct vs Float32Array), the orthographic ray/root math, the front/back composite, and the WebGPU resource lifecycle against the runtime contract in packages/core/src/effects/; all are consistent, and the diff covers every new-effect surface (bundle, subpath exports/types, catalog, demo registry, preview Still, docs registrations).

ℹ️ New cylinder() ships without test coverage

Every other effect in packages/effects has a block in effect-params.test.ts covering its docs link, label, validateParams, and distinct effectKey, but cylinder() adds none. These are pure-JS assertions that don't need a GPU, so the new validation branches (radius <= 0, non-finite numbers, malformed position, invalid render) are currently unverified by CI.

Technical details

# Add cylinder() cases to effect-params.test.ts

## Affected sites
- `packages/effects/src/test/effect-params.test.ts` — the per-effect docs-link, label, validation, and effect-key suites have no `cylinder()` entry.

## Required outcome
- Assert `documentationLink` is `https://www.remotion.dev/docs/effects/cylinder` and `label` is `cylinder()`.
- Assert `validateParams` rejects `radius <= 0`, non-finite numeric params, a `position` that isn't two finite numbers, and a `render` outside `'both' | 'front' | 'back'`.
- Assert distinct `effectKey`s for differing params (mirroring the `cornerPin()` / `contourLines()` blocks).

## Suggested approach (optional)
- Follow the existing `cornerPin()` and `contourLines()` blocks in the same file; no WebGPU/GPU context is required.

  ^{｜ Fix it ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash ｜ 𝕏}