fframes-components 0.1.2

Isolated, mix-and-match animated video components for fframes, ported from the remocn Remotion library
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

# fframes-components


A curated library of reusable animated components for [fframes](https://crates.io/crates/fframes).
Every component is behind its own Cargo feature, so consumers compile only what they select.

The crate is configured for publication on crates.io.

## Add one component


Add only `logo-assemble` from crates.io:

```toml
[dependencies]
fframes-components = {
    version = "0.1.0",
    default-features = false,
    features = ["logo-assemble"]
}
```

Or use Cargo:

```sh
cargo add fframes-components@0.1.0 --no-default-features --features logo-assemble
```

Use the selected component directly:

```rust
use fframes_components::{ComponentsVideo, Horizontal};
use fframes_components::components::showcase::logo_assemble::{
    LogoAssemble,
    LogoAssembleConfig,
};

let logo = LogoAssemble::new(LogoAssembleConfig {
    brand_name: "my-brand".to_owned(),
    ..LogoAssembleConfig::default()
});

let video: Horizontal = ComponentsVideo::from_components(vec![Box::new(logo)]);
```

Unused component modules are excluded at compile time. The default feature set is empty.

## Components


- `answer-highlight`
- `bottom-up-letters`
- `carousel-3d`
- `channel-thread`
- `check-cycle`
- `cinematic-text-swap`
- `circle-marker`
- `confetti`
- `crossed-off`
- `cursor-flyover`
- `echo-stack`
- `glitch-cycle`
- `inflating-text`
- `lines-to-text`
- `logo-assemble`
- `map-flyover`
- `multi-text-typewriter`
- `per-character-rise`
- `period-drop`
- `prompt-zoom`
- `reel-collage`
- `short-slide-right`
- `slide-in-text`
- `soft-blur-in`
- `spinning-text-wheel`
- `spring-scale-in`
- `squeeze-in`
- `staggered-fade-up`
- `strike-through`
- `text-build`
- `text-highlight`
- `text-marker`
- `text-messages`
- `text-reveal`
- `text-rewrite`
- `text-swap`
- `text-swell`
- `top-down-letters`
- `tracking-in`
- `type-writer`
- `typing-code-block`
- `word-by-word`
- `word-flip`
- `word-gather`
- `youtube-comment-highlight`
- `youtube-end-card`
- `youtube-subscribe-nudge`

`cinematic-text-swap` is the preset-driven cinematic transition. `text-swap` is the original lightweight text-swap component. The distinct IDs avoid a feature and catalog collision.

Enable every curated component with the `full` feature.

## Optional CLI


The `cli` feature adds the standalone renderer and preview binary:

```sh
cargo run --release \
  --no-default-features \
  --features cli,logo-assemble \
  -- --components logo-assemble render -o logo.mp4
```

Library consumers do not need the CLI, Vulkan renderer, or native player dependencies.

## Demo site


The static component gallery lives in [`docs/`](docs/) and uses only repository-relative paths.
To preview it locally:

```sh
cd docs
python -m http.server 8000
```

Then open <http://localhost:8000>.

To deploy it with GitHub Pages:

1. Commit and push the `docs/` directory to the repository's default branch.
2. Open the GitHub repository and go to **Settings → Pages**.
3. Under **Build and deployment**, choose **Deploy from a branch**.
4. Select the default branch, choose the `/docs` folder, and click **Save**.
5. Wait for the Pages deployment to finish. The site will be available at
   `https://bilaal0x.github.io/fframes-components/`.

Future changes to `docs/` deploy automatically whenever that branch is pushed.

## Credits


The Rust implementation is MIT licensed. Components were ported from [remocn](https://github.com/Remocn/remocn) and [snapcn](https://github.com/shadcn-labs/snapcn), with the upstream namespaces removed from the public component IDs. Font and embedded demo-image details are listed in [CREDITS.md](CREDITS.md).