diff --git a/demos/tsx-dom-demo/src/components/MyCustomElement.tsx b/demos/tsx-dom-demo/src/components/MyCustomElement.tsx
index 688555a..4a4fc43 100644
--- a/demos/tsx-dom-demo/src/components/MyCustomElement.tsx
+++ b/demos/tsx-dom-demo/src/components/MyCustomElement.tsx
@@ -31,7 +31,7 @@ export const MyCustomElement = defineCustomElement<MyCustomElementProps>(
             clearTimeout(this.timeout);
             this.timeout = setTimeout(() => {
                 this.textContent = text;
-            }, 1000);
+            }, 2000);
         }
 
         setIntersecting(intersecting: boolean) {
diff --git a/demos/tsx-dom-demo/www/style.css b/demos/tsx-dom-demo/www/style.css
index f1e74f9..67611c5 100644
--- a/demos/tsx-dom-demo/www/style.css
+++ b/demos/tsx-dom-demo/www/style.css
@@ -132,16 +132,17 @@ my-custom-element {
 my-custom-element::before {
     content: "";
     position: absolute;
-    inset: auto 0 0 0;
+    inset: auto 0 40% 0;
     background: #4a8f3c;
     height: 20%;
-    transition: all ease-in-out 10s;
+    transition: all ease-in-out 6s;
     z-index: -1;
     opacity: 0.5;
 }
 
 my-custom-element.active::before {
     height: 100%;
+    bottom: 0;
     background: var(--active-color);
     opacity: 0.9;
 }