Soft-sharp interactive demo

Hello there! We are back after two years of silence. We are just finishing the TorusKit v3 (still in beta), and what's the best way to show it's possibilities?

To show it in the demo! We have joined the CodePen "Soft-sharp Challenge" with this interactive example. Check it out here:

https://toruskit.com/labs/soft-sharp

https://codepen.io/toruskit/pen/qBgGGEO

To animate the things we have used just this simple code right in the HTML (no JS knowledge required):

<code>

<div

  id="wrapper"

  data-tor-group="

    .rectangle =>

      sy(0)

      ty(\random(1, 3)\rem)

      animate:[sy(1) ty(0rem) <4s, elastic, delay:\random(0.25, 0.5)\s>]

      hover1:[-ty(1rem <2s, elastic>)]

      hover:[+sy(0.25) +sx(0.25) <2s, elastic>]

      mouse:[+s(1.5) +br(50%) <2s, method: self>]

    ;

    #soft => o(0) mouse(x):o(1 <2s, method: middle>);

    #sharp => mouse(x):o(0 <2s, method: middle>);

  "

>

</code>