Skip to content

Add Chinese design doc for mask and visual effects (NarraLeaf React)#110

Draft
helloyork wants to merge 1 commit into
developfrom
codex/research-mask-functionality-for-narraleaf
Draft

Add Chinese design doc for mask and visual effects (NarraLeaf React)#110
helloyork wants to merge 1 commit into
developfrom
codex/research-mask-functionality-for-narraleaf

Conversation

@helloyork

Copy link
Copy Markdown
Collaborator

Motivation

  • Provide a unified design and phased implementation plan for masks, clips, filters, blends, overlays and mask-based transitions to avoid multiple incompatible mask systems.
  • Define goals to keep the implementation low-invasion, serializable, resource-preloadable and reusable across Displayable/Layer/Scene scopes.
  • Propose a practical MVP and multi-phase rollout to enable immediate CSS-based capabilities while deferring higher-risk features like video alpha/canvas masks.

Description

  • Add a new documentation file docs/mask-research.zh-CN.md that describes API proposals, design goals and implementation phases for visual effects and masking.
  • Specify a VisualEffect/Transform field set (example VisualEffectTransformProps) and a unified DOM style resolver mapping mask/clip/filter/blend fields to maskImage, clipPath, filter, backdropFilter, mixBlendMode, etc.
  • Recommend a chainable Displayable API (e.g. displayable.effect(), displayable.mask(), displayable.clip()) and an effect layer / OverlayEffect model for non-blocking video/textures, plus MaskTransition and Preset APIs.
  • Outline a nine-phase rollout (Phase 1..9) and an MVP checklist that prioritizes CSS masks, clip-path, filter, mix-blend-mode, preload of mask images, an effect layer and a few presets like circleReveal and vignette.

Testing

  • No automated tests were required or run for this documentation-only change.

Codex Task

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant