Skip to content

docs(web): document SlideTransition API#158

Open
1weiho wants to merge 2 commits into
mainfrom
docs/slide-transition-api
Open

docs(web): document SlideTransition API#158
1weiho wants to merge 2 commits into
mainfrom
docs/slide-transition-api

Conversation

@1weiho
Copy link
Copy Markdown
Owner

@1weiho 1weiho commented May 24, 2026

What

Adds a Reference page for the SlideTransition API introduced in #149 so the public docs reflect what the runtime now ships.

  • New page reference/slide-transitions.mdx — full schema (SlideTransition / TransitionPhase), module-level vs per-page declaration, the incoming-page-wins rule, the --osd-dir / data-osd-dir direction hook, design principles, a six-member tasteful family (rise / dissolve / settle / bloom / fall / breath), and anti-patterns.
  • reference/slide-meta.mdx — added a transition (optional) section pointing at the new page, and listed SlideTransition / TransitionPhase in the @open-slide/core import block.
  • reference/meta.json — slotted slide-transitions into the sidebar between slide-meta and image-placeholder.

Why

Before this PR the only place the API was documented was the slide-authoring agent skill. Users browsing opens-slide.dev/docs had no way to discover the feature or learn the keyframe contract.

Notes for reviewers

  • Tone and structure mirror the existing reference pages (image-placeholder, config).
  • The principles + tasteful-family section is intentionally aligned with the slide-authoring skill so framework docs and agent guidance don't drift.
  • Docs-only, apps/web only — no changeset (apps/web is private, not published).

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added slide transition support with customizable per-page animations using the Web Animations API. Transitions are opt-in, honor reduced-motion, and can be set at module or page level.
  • Documentation

    • Added a comprehensive reference page covering the SlideTransition schema, precedence rules, direction mirroring, design principles, and six example transition patterns.
    • Included the new page in the generated reference index.

Review Change Stack

Add a Reference page for the SlideTransition API introduced in #149 —
schema, module-level vs per-page declaration, incoming-page-wins rule,
the --osd-dir / data-osd-dir direction hook, design principles, the
six-member tasteful family (rise / dissolve / settle / bloom / fall /
breath), and anti-patterns.

Cross-link from slide-meta: add a `transition` section and surface
SlideTransition / TransitionPhase in the import block.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

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

Project Deployment Actions Updated (UTC)
open-slide-demo Ready Ready Preview, Comment May 24, 2026 1:48pm
open-slide-web Ready Ready Preview, Comment May 24, 2026 1:48pm

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: edb6aefe-ec30-46dc-ae07-188af33fbc16

📥 Commits

Reviewing files that changed from the base of the PR and between 9369f3b and 4239e02.

📒 Files selected for processing (1)
  • apps/web/content/docs/reference/slide-transitions.mdx
💤 Files with no reviewable changes (1)
  • apps/web/content/docs/reference/slide-transitions.mdx

Walkthrough

This PR adds comprehensive reference documentation for the SlideTransition feature, which enables opt-in per-page enter/exit animations powered by the Web Animations API. Updates include registering the new reference page, documenting the module-level transition export, and providing a full guide with examples and design guidance.

Changes

Slide Transitions Documentation

Layer / File(s) Summary
Reference page registration
apps/web/content/docs/reference/meta.json
Register the slide-transitions documentation page in the reference metadata index.
Module-level transition export documentation
apps/web/content/docs/reference/slide-meta.mdx
Document the optional module-level transition: SlideTransition export as the deck-wide default between pages, and update imports to include SlideTransition and TransitionPhase types.
SlideTransition comprehensive reference
apps/web/content/docs/reference/slide-transitions.mdx
New reference page explaining opt-in per-page animations with a full example, schema definition, declaration surfaces (module-level vs per-page), precedence rules ("incoming page wins"), direction hook mechanism for mirrored motion, design principles for restrained timing/magnitude, six tasteful example transitions (rise, dissolve, settle, bloom, fall, breath), and closing notes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Poem

🐰 A slide, a dance, a graceful glide,
With easing curves and timing's pride,
The transitions bloom like flowers fair,
Six styles to choose with mindful care,
Respect the motion, keep it light—
Let animations feel just right! 🎬

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically summarizes the main change: adding documentation for the SlideTransition API, which aligns with all three file modifications (new slide-transitions.mdx page, updates to slide-meta.mdx, and meta.json entry).
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/content/docs/reference/meta.json`:
- Line 3: biome reported two issues: the project biome.json schema is outdated
and one lint rule can be auto-fixed; update the schema by running the biome
migration (run the recommended "biome migrate" to upgrade the schema version in
biome.json) and run the auto-fixer for lint issues (execute "pnpm check:fix") to
fix the useOptionalChain warning in packages/core/src/http/request-guard.ts so
the project passes biome checks without warnings.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 78e0607a-525e-4fba-923d-fc7a11fd99ab

📥 Commits

Reviewing files that changed from the base of the PR and between f3efa84 and 9369f3b.

📒 Files selected for processing (3)
  • apps/web/content/docs/reference/meta.json
  • apps/web/content/docs/reference/slide-meta.mdx
  • apps/web/content/docs/reference/slide-transitions.mdx

{
"title": "Reference",
"pages": ["config", "slide-meta", "image-placeholder", "locale"]
"pages": ["config", "slide-meta", "slide-transitions", "image-placeholder", "locale"]
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Locate pnpm check script
echo "== package.json scripts =="
cat package.json | sed -n '1,220p' | rg -n "\"check\"|\"check:fix\"|biome|eslint|prettier" || true

echo
echo "== Workspace scripts (if present) =="
ls -la
if [ -f apps/web/package.json ]; then
  cat apps/web/package.json | sed -n '1,240p' | rg -n "\"check\"|\"check:fix\"|biome" || true
fi

echo
# 2) Attempt running pnpm check
echo "== Running: pnpm check =="
pnpm check

Repository: 1weiho/open-slide

Length of output: 4213


Biome check status for JSON meta.json

  • pnpm check (biome check .) was run and exited successfully (exit code 0), but reported warnings:
    • biome.json: schema version mismatch (expected 2.4.15, found 2.4.12) — run biome migrate.
    • FIXABLE lint: packages/core/src/http/request-guard.ts (useOptionalChain) — run pnpm check:fix.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/content/docs/reference/meta.json` at line 3, biome reported two
issues: the project biome.json schema is outdated and one lint rule can be
auto-fixed; update the schema by running the biome migration (run the
recommended "biome migrate" to upgrade the schema version in biome.json) and run
the auto-fixer for lint issues (execute "pnpm check:fix") to fix the
useOptionalChain warning in packages/core/src/http/request-guard.ts so the
project passes biome checks without warnings.

The Design principles section already states the positive form; the
\xe2\x9d\x8c list read preachy in a reference doc.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant