fix: keep empty preview visible before hydration

AGENTS.md

@@ -6,7 +6,7 @@
 
 - `src/app/page.tsx` — стартовая заставка (Fluw splash). Это placeholder: при старте реального продукта заменяй его композицией страниц, а не оставляй заставку.
 - Раскладывай новый UI по FSD: страницы-композиции → `src/widgets/*`, пользовательские сценарии → `src/features/*`, бизнес-данные → `src/entities/*`, примитивы — `src/shared/*`. Не складывай всё в один файл.
-- Базовые UI-примитивы shadcn — в `src/shared/ui/*` (vendored, не переписывай). Доступен `framer-motion` (анимации заставки).
+- Базовые UI-примитивы shadcn — в `src/shared/ui/*` (vendored, не переписывай). Доступен `framer-motion`, но первый содержательный кадр обязан оставаться видимым без hydration: не оборачивай весь экран в `initial={{ opacity: 0 }}`.
 - Проверка после правок: `pnpm lint` и `pnpm build`.
 
 ## Design System

README.md

@@ -71,7 +71,7 @@
 
 ## Анимации: framer-motion
 
-Для анимаций используется `framer-motion`. Это мощная библиотека для создания плавных и производительных анимаций в React-компонентах.
+Для анимаций доступен `framer-motion`. Содержательный интерфейс должен оставаться видимым до hydration, поэтому не задавайте `opacity: 0` как исходное состояние для всего экрана или другого критичного контейнера.
 
 Пример использования:
 
@@ -81,9 +81,9 @@ import { motion } from 'framer-motion';
 function AnimatedComponent() {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
+      initial={false}
+      whileHover={{ y: -2 }}
+      transition={{ duration: 0.2 }}
     >
       Анимированный контент
     </motion.div>

package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "dev": "next dev",
     "type-check": "tsc --noEmit",
-    "build": "next build",
+    "build": "next build && pnpm verify:no-js-preview",
+    "verify:no-js-preview": "node scripts/verify-no-js-preview.mjs",
     "start": "next start",
     "lint": "oxlint --threads=2 --deny-warnings",
     "lint:fix": "oxlint --threads=2 --type-aware --fix"

scripts/verify-no-js-preview.mjs

@@ -0,0 +1,27 @@
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+const outputPath = resolve(".next/server/app/index.html");
+const html = await readFile(outputPath, "utf8");
+
+// The placeholder is the first frame for a newly-created project. It must stay
+// visible when a client chunk is delayed or rejected; later product pages are
+// free to replace it and choose their own bounded animation policy.
+if (html.includes("Fluw template")) {
+  const main = html.match(/<main\b[\s\S]*?<\/main>/i)?.[0];
+  if (!main) {
+    throw new Error("Fluw placeholder is missing its main landmark");
+  }
+
+  if (
+    /style="[^"]*(?:opacity\s*:\s*0(?:[;"]|\s)|visibility\s*:\s*hidden|display\s*:\s*none)/i.test(
+      main,
+    )
+  ) {
+    throw new Error(
+      "Fluw placeholder hides content before client hydration; keep the first frame visible",
+    );
+  }
+}
+
+console.log("No-JS preview visibility verified");

src/app/page.tsx

@@ -1,7 +1,3 @@
-"use client";
-
-import { motion } from "framer-motion";
-
 function FluwSquareIcon({ className = "size-11" }: { className?: string }) {
   return (
     <span
@@ -18,12 +14,7 @@ export default function Home() {
     <main className="min-h-screen overflow-hidden bg-background text-white">
       <section className="relative mx-auto flex min-h-screen w-full max-w-[900px] items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
         <div className="w-full">
-          <motion.div
-            initial={{ opacity: 0, y: 16 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.45, ease: "easeOut" }}
-            className="mx-auto flex max-w-[760px] flex-col items-center text-center"
-          >
+          <div className="mx-auto flex max-w-[760px] flex-col items-center text-center">
             <div className="mb-8 flex items-center gap-3 text-left">
               <FluwSquareIcon />
 
@@ -36,7 +27,7 @@ export default function Home() {
                 </div>
               </div>
             </div>
-          </motion.div>
+          </div>
         </div>
       </section>
     </main>