# bringking/react-web-animation architecture

> Architecture diagram of the GitHub repository bringking/react-web-animation, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bringking/react-web-animation
- Repository: https://github.com/bringking/react-web-animation

## Overview

react-web-animation is a small React runtime library that declaratively wraps the Web Animations API. Users supply child elements, keyframes, and timing; they can animate one element directly or compose animatable children into parallel or serial effects, then control playback and receive callbacks. The map focuses on runtime components and their shared player-control layer. The README documents the Web Animations API polyfill dependency; sampled source shows the direct API calls. Demos and examples are omitted as usage material.

Main entry points: [`src/index.js`](https://github.com/bringking/react-web-animation/blob/master/src/index.js) (Public exports), [`src/animation.js`](https://github.com/bringking/react-web-animation/blob/master/src/animation.js) (Single animation), [`src/effect.js`](https://github.com/bringking/react-web-animation/blob/master/src/effect.js) (Effect orchestration), [`src/animated.js`](https://github.com/bringking/react-web-animation/blob/master/src/animated.js) (Animated tags)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["React API"]
  node_exports["Public exports<br/>[index.js]"]
  node_animated["Animated tags<br/>[animated.js]"]
  node_animatable["Animatable child<br/>[animatable.js]"]
end

subgraph group_effects["Animation Effects"]
  node_animation["Single animation<br/>[animation.js]"]
  node_group["Parallel group<br/>[animation_group.js]"]
  node_sequence["Serial sequence"]
  node_effect["Effect orchestration<br/>[effect.js]"]
end

subgraph group_runtime["Runtime Support"]
  node_playable["Player controls<br/>[playable.js]"]
  node_hoc["Element wrappers"]
  node_domlist["DOM tag list<br/>[dom_elements.js]"]
end

node_user(("Library user"))
node_webapi["Web Animations API"]

node_user -->|"imports"| node_exports
node_exports -->|"exports"| node_animated
node_exports -->|"exports"| node_animatable
node_exports -->|"exports"| node_animation
node_exports -->|"exports"| node_group
node_exports -->|"exports"| node_sequence
node_animated -->|"wraps"| node_animation
node_animated -->|"creates tags"| node_hoc
node_animatable -->|"creates tags"| node_hoc
node_hoc -->|"iterates tags"| node_domlist
node_animation -->|"extends"| node_animatable
node_animation -->|"uses controls"| node_playable
node_group -->|"extends"| node_effect
node_sequence -->|"extends"| node_effect
node_effect -->|"uses controls"| node_playable
node_animation -->|"animates node"| node_webapi
node_effect -->|"plays timeline"| node_webapi

click node_exports "https://github.com/bringking/react-web-animation/blob/master/src/index.js"
click node_animated "https://github.com/bringking/react-web-animation/blob/master/src/animated.js"
click node_animatable "https://github.com/bringking/react-web-animation/blob/master/src/animatable.js"
click node_animation "https://github.com/bringking/react-web-animation/blob/master/src/animation.js"
click node_group "https://github.com/bringking/react-web-animation/blob/master/src/animation_group.js"
click node_sequence "https://github.com/bringking/react-web-animation/blob/master/src/animation_sequence.js"
click node_effect "https://github.com/bringking/react-web-animation/blob/master/src/effect.js"
click node_playable "https://github.com/bringking/react-web-animation/blob/master/src/mixins/playable.js"
click node_hoc "https://github.com/bringking/react-web-animation/blob/master/src/utils/with_hoc_elements.js"
click node_domlist "https://github.com/bringking/react-web-animation/blob/master/src/utils/dom_elements.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_exports,node_animated,node_animatable,node_user toneBlue
class node_animation,node_group,node_sequence,node_effect toneAmber
class node_playable,node_hoc,node_domlist,node_webapi toneMint
```

## Components

### React API

- [Public exports](https://github.com/bringking/react-web-animation/blob/master/src/index.js): `src/index.js`
- [Animated tags](https://github.com/bringking/react-web-animation/blob/master/src/animated.js): `src/animated.js`
- [Animatable child](https://github.com/bringking/react-web-animation/blob/master/src/animatable.js): `src/animatable.js`

### Animation Effects

- [Single animation](https://github.com/bringking/react-web-animation/blob/master/src/animation.js): `src/animation.js`
- [Parallel group](https://github.com/bringking/react-web-animation/blob/master/src/animation_group.js): `src/animation_group.js`
- [Serial sequence](https://github.com/bringking/react-web-animation/blob/master/src/animation_sequence.js): `src/animation_sequence.js`
- [Effect orchestration](https://github.com/bringking/react-web-animation/blob/master/src/effect.js): `src/effect.js`

### Runtime Support

- [Player controls](https://github.com/bringking/react-web-animation/blob/master/src/mixins/playable.js): `src/mixins/playable.js`
- [Element wrappers](https://github.com/bringking/react-web-animation/blob/master/src/utils/with_hoc_elements.js): `src/utils/with_hoc_elements.js`
- [DOM tag list](https://github.com/bringking/react-web-animation/blob/master/src/utils/dom_elements.js): `src/utils/dom_elements.js`

### Other components

- **Library user**
- **Web Animations API**

## Connections

- Library user → Public exports: imports (evidence: `README.md`)
- Public exports → Animated tags: exports (evidence: `src/index.js`)
- Public exports → Animatable child: exports (evidence: `src/index.js`)
- Public exports → Single animation: exports (evidence: `src/index.js`)
- Public exports → Parallel group: exports (evidence: `src/index.js`)
- Public exports → Serial sequence: exports (evidence: `src/index.js`)
- Animated tags → Single animation: wraps (evidence: `src/animated.js`)
- Animated tags → Element wrappers: creates tags (evidence: `src/animated.js`)
- Animatable child → Element wrappers: creates tags (evidence: `src/animatable.js`)
- Element wrappers → DOM tag list: iterates tags (evidence: `src/utils/with_hoc_elements.js`)
- Single animation → Animatable child: extends (evidence: `src/animation.js`)
- Single animation → Player controls: uses controls (evidence: `src/animation.js`)
- Parallel group → Effect orchestration: extends (evidence: `src/animation_group.js`)
- Serial sequence → Effect orchestration: extends (evidence: `src/animation_sequence.js`)
- Effect orchestration → Player controls: uses controls (evidence: `src/effect.js`)
- Single animation → Web Animations API: animates node (evidence: `src/animation.js`)
- Effect orchestration → Web Animations API: plays timeline (evidence: `src/effect.js`)