feat: add Sal.js scroll animations

src/pages/colophon.mdx

@@ -5,11 +5,18 @@ description: …
 intro: In publishing, a colophon is a brief statement containing information about the publication.
 ---
 
+import { animation, animationDelay } from "../data/site";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
+<div {...animation}>
+
 The source code of this website is available on [GitHub](https://github.com/kogakure/website-astro-stefanimhoff.de). You are welcome to learn from the source code and reuse code for your projects. Don’t steal it. Learn from it. Remix. Reuse. Build your own things. 🤘
 
+</div>
+
+<div {...animationDelay}>
+
 ## Design
 
 - I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (渋い) as a source of inspiration. To learn more about the process, please read the essays about the [inspiration](/new-website-2020-inspiration/) and [design](/new-website-2020-design/).
@@ -17,6 +24,10 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - I created the Bonsai image on my homepage with [Stable Diffusion](https://stability.ai/), [ControlNet](https://github.com/lllyasviel/ControlNet), and [Affinity Photo](https://affinity.serif.com/photo/).
 - The minimalistic icons are by [Remix Icon](https://remixicon.com/), which is [Jimmy Cheung](https://github.com/xiaochunjimmy) and [Wendy Gao](https://github.com/wendygaoyuan).
 
+</div>
+
+<div {...animationDelay}>
+
 ## Technology
 
 - The website is built with [Astro](https://astro.build/), the all-in-one web framework.
@@ -31,3 +42,5 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - I use [reading-time](https://github.com/ngryman/reading-time) to add the reading time to Remark.
 - To parse and format dates I use [Moment.js](https://momentjs.com/).
 - I use [Plop](https://plopjs.com/) to generate content from templates.
+
+</div>