cleaning

examples/src/fireworks/src/fireworks.pax

@@ -1,19 +1,30 @@
-<Group>
-    <Ellipse width=300px height=300px fill=hsla(0.17%, 255, 64, 255) x=50% y=50%/>
-    <Ellipse width=50px height=50px fill=rgb(240, 240, 240) x=40% y=40%/>
-    <Ellipse width=50px height=50px fill=rgb(240, 240, 240) x=60% y=40%/>
-    <Ellipse width=100px height=50px fill=rgb(240, 240, 240) x=50% y=60%/>
+<Group @wheel=self.handle_wheel>
+    <Text x=0% y=0% text="SCROLL" height=100% width=100% style={
+        font: Font::Web(
+            "Roboto",
+            "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
+            FontStyle::Normal,
+            FontWeight::Bold)
+        font_size: 20.00px
+        fill: rgba(252, 252, 252, 255)
+        align_vertical: TextAlignVertical::Center
+        align_horizontal: TextAlignHorizontal::Center
+        align_multiline: TextAlignHorizontal::Center
+        underline: false
+    }/>
+    for i in 1..60 {
+        <Rectangle class=rect width=300px height=300px/>
+    }
 </Group>
 
 @settings {
-    #text {
-        style: {
-            font: {Font::Web("ff-real-headline-pro", "https://use.typekit.net/ivu7epf.css", FontStyle::Normal, FontWeight::Light)}
-            font_size: 22px
-            fill: WHITE
-            align_vertical: TextAlignVertical::Center
-            align_horizontal: TextAlignHorizontal::Center
-            align_multiline: TextAlignHorizontal::Center
-        }
+    @tick: handle_tick
+    .rect {
+        fill: {hsl((i * 5.00 + ticks)deg, 85%, 55%)}
+        rotate: {((i * rotation * 40) + (ticks / 1.50))deg}
+        scale_x: {(50 * (0.75 + (i * i * 0.08 * rotation)) * (1 - ((rotation / 3) + i / 100.00)))%}
+        scale_y: {(50 * (0.75 + (i * i * 0.08 * rotation)) * (1 - ((rotation / 3) + i / 100.00)))%}
+        x: 50%
+        y: 50%
     }
 }