Refactor FlipCard to use CSS 3D Transforms and Explicit Props
@Katotodan is already working on this.
Since May 13, 2026.
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 239
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 5
Description
Context
The current FlipCard implementation relies on a JavaScript setTimeout to swap children during the animation. This causes several issues:
-
Flicker/Blanking: Content can disappear if the JS thread is busy.
-
Rigid API: Using an array for children is prone to runtime errors.
-
Theming/Sizing: Difficult to pass dynamic backgrounds or calculate container sizes because the back face is not rendered until the flip occurs.
Proposed Changes
-
Replace array-based children with explicit frontElement and backElement props.
-
Remove setTimeout logic and implement standard CSS rotateY(180deg) with backface-visibility: hidden.
-
Add flipAction prop to support both 'click' and 'hover' interactions.
-
Improve TypeScript safety by removing manual child-index checking.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.