webfluent 0.4.0-alpha

The Web-First Language — compiles to HTML, CSS, JavaScript, and PDF. 50+ built-in components, reactivity, routing, i18n, SSG, and template engine.
Documentation 
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation System</title>
    <meta name="description" content="A programming language that compiles to HTML, CSS, and JavaScript. Build SPAs and static sites with built-in components, reactivity, routing, i18n, and animations.">
    <link rel="stylesheet" href="../styles.css">
</head>
<body>
    <div id="app">
        <!--wf-component-->
        <div class="wf-row">
            <!--wf-component-->
            <div class="wf-container wf-animate-fadeIn">
                <div class="wf-spacer"></div>
                <h1 class="wf-heading wf-heading--h1">Animation System</h1>​
                <p class="wf-text wf-text--muted">Declarative animations built into the language. No CSS keyframes to write.</p>​
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">Mount Animations</h2>​
                <p class="wf-text">Add an animation modifier to any component. It plays when the element appears. Hover each card to replay.</p>​
                <div class="wf-spacer"></div>
                <div class="wf-grid" style="grid-template-columns: repeat(3, 1fr)">
                    <div class="wf-card wf-card--outlined wf-animate-fadeIn">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">fadeIn</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Fades from transparent</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-slideUp">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">slideUp</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Slides from below</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-scaleIn">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">scaleIn</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Scales from 90%</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-slideDown">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">slideDown</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Slides from above</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-slideLeft">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">slideLeft</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Slides from right</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-bounce">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">bounce</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Bouncy entrance</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-shake">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">shake</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Horizontal shake</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-pulse">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">pulse</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Gentle scale pulse</p>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-slideRight">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">slideRight</p>​
                            <p class="wf-text wf-text--center wf-text--muted wf-text--small">Slides from left</p>​
                        </div>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <div class="wf-card wf-card--outlined">
                    <div class="wf-card__body">
                        <code class="wf-code">Card(elevated, fadeIn) { ... }
Heading(&quot;Title&quot;, h1, slideUp)
Button(&quot;Click&quot;, primary, bounce)</code>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">Live: Conditional Animation</h2>​
                <p class="wf-text">Toggle the switch to see enter/exit animations on the card below.</p>​
                <div class="wf-spacer"></div>
                <label class="wf-switch">Show animated card</label>​
                <div class="wf-spacer"></div>
                <!--wf-if-->
                <div class="wf-spacer"></div>
                <div class="wf-card wf-card--outlined">
                    <div class="wf-card__body">
                        <code class="wf-code">if showCard, animate(scaleIn, fadeOut) {
    Card(elevated) {
        Text(&quot;Animated content&quot;)
    }
}</code>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">Speed Variants</h2>​
                <div class="wf-spacer"></div>
                <div class="wf-grid" style="grid-template-columns: repeat(3, 1fr)">
                    <div class="wf-card wf-card--outlined wf-animate-fadeIn">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">fast</p>​
                            <p class="wf-text wf-text--center wf-text--muted">150ms</p>​
                            <code class="wf-code">Card(elevated, fadeIn, fast)</code>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-fadeIn">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">default</p>​
                            <p class="wf-text wf-text--center wf-text--muted">300ms</p>​
                            <code class="wf-code">Card(elevated, fadeIn)</code>​
                        </div>​
                    </div>​
                    <div class="wf-card wf-card--outlined wf-animate-fadeIn">
                        <div class="wf-card__body">
                            <p class="wf-text wf-text--center wf-text--bold">slow</p>​
                            <p class="wf-text wf-text--center wf-text--muted">500ms</p>​
                            <code class="wf-code">Card(elevated, fadeIn, slow)</code>​
                        </div>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">All 12 Animations</h2>​
                <div class="wf-spacer"></div>
                <table class="wf-table">
                    <thead>
                        <td>Name</td>​
                        <td>Effect</td>​
                        <td>Usage</td>​
                    </thead>​
                    <tr>
                        <td>fadeIn / fadeOut</td>​
                        <td>Opacity fade</td>​
                        <td>Card(elevated, fadeIn)</td>​
                    </tr>​
                    <tr>
                        <td>slideUp / slideDown</td>​
                        <td>Vertical slide + fade</td>​
                        <td>Heading(&quot;Hi&quot;, h1, slideUp)</td>​
                    </tr>​
                    <tr>
                        <td>slideLeft / slideRight</td>​
                        <td>Horizontal slide + fade</td>​
                        <td>Text(&quot;Hello&quot;, slideLeft)</td>​
                    </tr>​
                    <tr>
                        <td>scaleIn / scaleOut</td>​
                        <td>Scale from/to 90%</td>​
                        <td>Badge(&quot;New&quot;, scaleIn)</td>​
                    </tr>​
                    <tr>
                        <td>bounce</td>​
                        <td>Bouncy entrance</td>​
                        <td>Button(&quot;Go&quot;, bounce)</td>​
                    </tr>​
                    <tr>
                        <td>shake</td>​
                        <td>Horizontal shake</td>​
                        <td>Alert(&quot;Error!&quot;, shake)</td>​
                    </tr>​
                    <tr>
                        <td>pulse</td>​
                        <td>Scale pulse (infinite)</td>​
                        <td>Badge(&quot;Live&quot;, pulse)</td>​
                    </tr>​
                    <tr>
                        <td>spin</td>​
                        <td>360-degree rotation</td>​
                        <td>Spinner(spin)</td>​
                    </tr>​
                </table>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">Conditional Animations</h2>​
                <p class="wf-text">Attach enter and exit animations to if blocks.</p>​
                <div class="wf-spacer"></div>
                <div class="wf-card wf-card--outlined">
                    <div class="wf-card__body">
                        <code class="wf-code">if visible, animate(slideUp, fadeOut) {
    Card { Text(&quot;Appears with slideUp, exits with fadeOut&quot;) }
}

if expanded, animate(scaleIn, scaleOut) {
    Text(&quot;Scales in and out&quot;)
}</code>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">List Stagger</h2>​
                <p class="wf-text">Animate list items with staggered delays.</p>​
                <div class="wf-spacer"></div>
                <div class="wf-card wf-card--outlined">
                    <div class="wf-card__body">
                        <code class="wf-code">for item in items, animate(slideUp, fadeOut, stagger: &quot;50ms&quot;) {
    Card { Text(item.name) }
}</code>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
                <hr class="wf-divider">
                <div class="wf-spacer"></div>
                <h2 class="wf-heading wf-heading--h2">Transition Blocks</h2>​
                <p class="wf-text">Smooth CSS transitions on property changes.</p>​
                <div class="wf-spacer"></div>
                <div class="wf-card wf-card--outlined">
                    <div class="wf-card__body">
                        <code class="wf-code">Button(&quot;Hover me&quot;) {
    transition {
        background 200ms ease
        transform 150ms spring
    }
}</code>​
                    </div>​
                </div>​
                <div class="wf-spacer"></div>
            </div>​
        </div>
        <!--wf-component-->
    </div>
    <script src="../app.js"></script>
</body>
</html>