chore: remove fade animations

Author: innocenzi

bun.lock

@@ -19,7 +19,6 @@
         "fuse.js": "^7.1.0",
         "instantsearch.js": "^4.78.0",
         "minisearch": "^7.1.2",
-        "motion": "^12.5.0",
         "reka-ui": "^2.1.0",
         "tailwindcss": "^4.0.14",
         "typescript": "^5.8.2",
@@ -586,8 +585,6 @@
 
     "flatted": ["[email protected]", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
-    "framer-motion": ["[email protected]", "", { "dependencies": { "motion-dom": "^12.5.0", "motion-utils": "^12.5.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-buPlioFbH9/W7rDzYh1C09AuZHAk2D1xTA1BlounJ2Rb9aRg84OXexP0GLd+R83v0khURdMX7b5MKnGTaSg5iA=="],
-
     "fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "function-bind": ["[email protected]", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -754,12 +751,6 @@
 
     "mlly": ["[email protected]", "", { "dependencies": { "acorn": "^8.14.0", "pathe": "^2.0.1", "pkg-types": "^1.3.0", "ufo": "^1.5.4" } }, "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw=="],
 
-    "motion": ["[email protected]", "", { "dependencies": { "framer-motion": "^12.5.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-BTAYKszMmTvXSsIyeHNMPSicjWgUA4j7OmZv1xPpthm4sPub3ch66fy9U7BhJ1uXNL3YeprsIegzuvps3FkEMw=="],
-
-    "motion-dom": ["[email protected]", "", { "dependencies": { "motion-utils": "^12.5.0" } }, "sha512-uH2PETDh7m+Hjd1UQQ56yHqwn83SAwNjimNPE/kC+Kds0t4Yh7+29rfo5wezVFpPOv57U4IuWved5d1x0kNhbQ=="],
-
-    "motion-utils": ["[email protected]", "", {}, "sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA=="],
-
     "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["[email protected]", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg=="],

package.json

@@ -21,7 +21,6 @@
     "fuse.js": "^7.1.0",
     "instantsearch.js": "^4.78.0",
     "minisearch": "^7.1.2",
-    "motion": "^12.5.0",
     "reka-ui": "^2.1.0",
     "tailwindcss": "^4.0.14",
     "typescript": "^5.8.2",

src/Web/Homepage/home.view.php

@@ -21,14 +21,14 @@
     <main class="container mx-auto relative flex flex-col grow -mt-(--ui-header-height)" style="tab-size: 2">
       <!-- Hero -->
       <section class="h-screen flex justify-center flex-col tracking-tighter px-6">
-        <h1 class="text-4xl md:text-5xl xl:text-6xl leading-none flex flex-col enter-fade">
+        <h1 class="text-4xl md:text-5xl xl:text-6xl leading-none flex flex-col">
           <span>Forget about the framework,</span>
           <span class="text-(--ui-primary)">focus on your business code.</span>
         </h1>
-        <p class="mt-4 md:mt-6 xl:mt-8 max-w-xl text-xl xl:text-2xl text-(--ui-text-toned) enter-fade">
+        <p class="mt-4 md:mt-6 xl:mt-8 max-w-xl text-xl xl:text-2xl text-(--ui-text-toned)">
           Tempest embraces modern PHP syntax and covers a wide range of features, giving you all the tools you need to build solid web applications.
         </p>
-        <div class="mt-6 md:mt-8 xl:mt-10 flex gap-4 items-center font-medium text-lg enter-fade">
+        <div class="mt-6 md:mt-8 xl:mt-10 flex gap-4 items-center font-medium text-lg">
           <a :href="uri([ChapterController::class, 'index'])" class="bg-(--ui-bg-inverted) text-(--ui-bg) hover:bg-(--ui-bg-inverted)/90 rounded-xl px-6 py-2.5 gap-1.5 transition">
             Get started
           </a>

src/Web/Homepage/x-home-section.view.php

@@ -4,14 +4,14 @@
 			<!-- Left -->
 			<div>
 				<div class="max-w-xl text-sans">
-					<span class="text-2xl md:text-4xl xl:text-5xl font-semibold leading-none flex flex-col text-display enter-fade">
+					<span class="text-2xl md:text-4xl xl:text-5xl font-semibold leading-none flex flex-col text-display">
 						{{ $heading }}
 					</span>
-					<p :foreach="$paragraphs as $paragraph" class="mt-1 md:mt-2 xl:mt-4 text-xl xl:text-2xl text-(--ui-text-muted) enter-fade">
+					<p :foreach="$paragraphs as $paragraph" class="mt-1 md:mt-2 xl:mt-4 text-xl xl:text-2xl text-(--ui-text-muted)">
 						{{ $paragraph }}
 					</p>
 				</div>
-				<div class="mt-6 enter-fade">
+				<div class="mt-6">
 					<a :href="$linkUri" class="no-primary rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
 						<span>{{ $linkLabel }}</span>
 						<x-icon name="tabler:arrow-right" class="size-4" />
@@ -20,7 +20,7 @@
 			</div>
 			<!-- Right -->
 			<div class="flex flex-col gap-2 p-2 text-sm bg-(--ui-bg)/20 backdrop-blur rounded-xl">
-				<div :foreach="$snippets as $snippet" class="bg-(--ui-bg)/50 border border-(--ui-border) rounded-md p-4 [&>pre]:h-full [&>pre]:overflow-x-auto enter-fade">
+				<div :foreach="$snippets as $snippet" class="bg-(--ui-bg)/50 border border-(--ui-border) rounded-md p-4 [&>pre]:h-full [&>pre]:overflow-x-auto">
 					{!! $codeBlocks[$snippet] !!}
 				</div>
 			</div>

src/Web/main.css

@@ -135,17 +135,6 @@
 	}
 }
 
-/*
-|--------------------------------------------------------------------------
-| Animations
-|--------------------------------------------------------------------------
-*/
-
-.enter-fade {
-	opacity: 0;
-	transform: translateX(-20px);
-}
-
 /*
 |--------------------------------------------------------------------------
 | Focus states

src/Web/scripts/main.ts

@@ -2,4 +2,3 @@ import './register-fonts'
 import './copy-code-blocks'
 import './highlight-current-prose-title'
 import './save-scroll'
-import './register-motion'