How make a background fade in at beginning and end of document?

I have a fiddle in javascript but I dont get it to work in vue3 with composition api (script setup). The background just overlays everything and nothing changes.

Any idea how I can get this to work?

https://jsfiddle.net/0wdhbs9a/13/

here is the code in stackblitz in a vue3 application:
https://stackblitz.com/edit/vue3-script-setup-with-vite-89wmsr?file=src/App.vue

I am open to improvements of the code. Or if there is a better solution (maybe a package) with vue available.