From 366a00ccf1d531a03a75e74373cfa74105485a27 Mon Sep 17 00:00:00 2001 From: Prashant Adhikari <78313801+ITx-prash@users.noreply.github.com> Date: Sun, 9 Aug 2026 20:42:12 +0545 Subject: [PATCH 01/18] Revert "Implement Motion best practices documentation and onboarding logo transition" This reverts commit ebf0870c13a8212753d2a6f648c3ddad642b14c9. --- .gitignore | 0 .opencode/skills/motion/SKILL.md | 61 ---- .../skills/motion/best-practices/base-ui.md | 106 ------ .../skills/motion/best-practices/index.md | 75 ----- .../skills/motion/best-practices/motion.md | 25 -- .../skills/motion/best-practices/react.md | 49 --- .opencode/skills/motion/best-practices/vue.md | 37 --- .opencode/skills/motion/codex/index.md | 95 ------ .opencode/skills/motion/css-spring/index.md | 70 ---- .../skills/motion/performance-audit/index.md | 44 --- .../skills/motion/transition-preview/index.md | 51 --- CardReference.jsx | 309 ------------------ IMPLEMENTATION_SUMMARY.md | 263 --------------- MINDSTREAM_PROJECT_SUMMARY.md | 0 README.md | 0 backend/.env.example | 0 backend/.gitignore | 0 backend/README.md | 0 backend/assets/audio/.gitkeep | 0 backend/assets/audio/README.md | 0 backend/assets/audio/distracted.mp3 | Bin backend/assets/audio/fatigued.mp3 | Bin backend/assets/backgrounds/.gitkeep | 0 backend/benchmark_render_presets.py | 0 backend/data/sample_emotion_result.json | 4 +- backend/movielite_docs/advanced.md | 0 backend/movielite_docs/api.md | 0 backend/output/audio/.gitkeep | 0 backend/output/audio/sample-job-001.srt | 127 +++++++ backend/output/reels/.gitkeep | 0 backend/package-lock.json | 0 backend/package.json | 0 backend/reel_generator.py | 0 backend/requirements.txt | 0 backend/server.js | 0 backend/test_presets.py | 0 eslint.config.js | 0 index.html | 0 opencode.json | 15 - package-lock.json | 22 +- package.json | 0 public/assets/logo.png | Bin public/icons/icon-128.png | Bin public/icons/icon-48.png | Bin public/icons/icon-512.png | Bin public/icons/icon-96.png | Bin public/manifest.json | 0 src/App.jsx | 0 src/background/index.js | 0 src/capture/CaptureWindow.jsx | 0 src/capture/capture.html | 0 src/capture/main.jsx | 0 src/components/layout/PanelHeader.jsx | 22 +- src/components/layout/PanelShell.jsx | 10 +- src/components/ui/BreathingDot.jsx | 0 src/components/ui/Button.jsx | 0 src/components/ui/Logo.jsx | 18 - src/components/ui/ProgressBar.jsx | 0 src/hooks/useCameraCapture.js | 0 src/hooks/useCycleStatus.js | 0 src/hooks/useSettings.js | 0 src/lib/checkIn.js | 0 src/lib/chromeApi.js | 0 src/lib/constants.js | 1 - src/main.jsx | 0 src/panel/SidePanel.jsx | 19 +- src/panel/states/CaptureState.jsx | 0 src/panel/states/ConfirmState.jsx | 0 src/panel/states/CountdownState.jsx | 0 src/panel/states/ErrorState.jsx | 0 src/panel/states/IdleState.jsx | 0 src/panel/states/OnboardingComplete.jsx | 48 --- src/panel/states/OnboardingState.jsx | 168 ++++------ src/panel/states/PendingState.jsx | 0 src/panel/states/PlayerState.jsx | 0 src/panel/states/ReadyState.jsx | 0 src/panel/states/SkeletonState.jsx | 0 src/style.css | 0 vite.config.js | 0 79 files changed, 206 insertions(+), 1433 deletions(-) mode change 100755 => 100644 .gitignore delete mode 100755 .opencode/skills/motion/SKILL.md delete mode 100755 .opencode/skills/motion/best-practices/base-ui.md delete mode 100755 .opencode/skills/motion/best-practices/index.md delete mode 100755 .opencode/skills/motion/best-practices/motion.md delete mode 100755 .opencode/skills/motion/best-practices/react.md delete mode 100755 .opencode/skills/motion/best-practices/vue.md delete mode 100755 .opencode/skills/motion/codex/index.md delete mode 100755 .opencode/skills/motion/css-spring/index.md delete mode 100755 .opencode/skills/motion/performance-audit/index.md delete mode 100755 .opencode/skills/motion/transition-preview/index.md delete mode 100755 CardReference.jsx delete mode 100755 IMPLEMENTATION_SUMMARY.md mode change 100755 => 100644 MINDSTREAM_PROJECT_SUMMARY.md mode change 100755 => 100644 README.md mode change 100755 => 100644 backend/.env.example mode change 100755 => 100644 backend/.gitignore mode change 100755 => 100644 backend/README.md mode change 100755 => 100644 backend/assets/audio/.gitkeep mode change 100755 => 100644 backend/assets/audio/README.md mode change 100755 => 100644 backend/assets/audio/distracted.mp3 mode change 100755 => 100644 backend/assets/audio/fatigued.mp3 mode change 100755 => 100644 backend/assets/backgrounds/.gitkeep mode change 100755 => 100644 backend/benchmark_render_presets.py mode change 100755 => 100644 backend/data/sample_emotion_result.json mode change 100755 => 100644 backend/movielite_docs/advanced.md mode change 100755 => 100644 backend/movielite_docs/api.md mode change 100755 => 100644 backend/output/audio/.gitkeep create mode 100644 backend/output/audio/sample-job-001.srt mode change 100755 => 100644 backend/output/reels/.gitkeep mode change 100755 => 100644 backend/package-lock.json mode change 100755 => 100644 backend/package.json mode change 100755 => 100644 backend/reel_generator.py mode change 100755 => 100644 backend/requirements.txt mode change 100755 => 100644 backend/server.js mode change 100755 => 100644 backend/test_presets.py mode change 100755 => 100644 eslint.config.js mode change 100755 => 100644 index.html delete mode 100755 opencode.json mode change 100755 => 100644 package-lock.json mode change 100755 => 100644 package.json mode change 100755 => 100644 public/assets/logo.png mode change 100755 => 100644 public/icons/icon-128.png mode change 100755 => 100644 public/icons/icon-48.png mode change 100755 => 100644 public/icons/icon-512.png mode change 100755 => 100644 public/icons/icon-96.png mode change 100755 => 100644 public/manifest.json mode change 100755 => 100644 src/App.jsx mode change 100755 => 100644 src/background/index.js mode change 100755 => 100644 src/capture/CaptureWindow.jsx mode change 100755 => 100644 src/capture/capture.html mode change 100755 => 100644 src/capture/main.jsx mode change 100755 => 100644 src/components/layout/PanelHeader.jsx mode change 100755 => 100644 src/components/layout/PanelShell.jsx mode change 100755 => 100644 src/components/ui/BreathingDot.jsx mode change 100755 => 100644 src/components/ui/Button.jsx delete mode 100755 src/components/ui/Logo.jsx mode change 100755 => 100644 src/components/ui/ProgressBar.jsx mode change 100755 => 100644 src/hooks/useCameraCapture.js mode change 100755 => 100644 src/hooks/useCycleStatus.js mode change 100755 => 100644 src/hooks/useSettings.js mode change 100755 => 100644 src/lib/checkIn.js mode change 100755 => 100644 src/lib/chromeApi.js mode change 100755 => 100644 src/lib/constants.js mode change 100755 => 100644 src/main.jsx mode change 100755 => 100644 src/panel/SidePanel.jsx mode change 100755 => 100644 src/panel/states/CaptureState.jsx mode change 100755 => 100644 src/panel/states/ConfirmState.jsx mode change 100755 => 100644 src/panel/states/CountdownState.jsx mode change 100755 => 100644 src/panel/states/ErrorState.jsx mode change 100755 => 100644 src/panel/states/IdleState.jsx delete mode 100755 src/panel/states/OnboardingComplete.jsx mode change 100755 => 100644 src/panel/states/OnboardingState.jsx mode change 100755 => 100644 src/panel/states/PendingState.jsx mode change 100755 => 100644 src/panel/states/PlayerState.jsx mode change 100755 => 100644 src/panel/states/ReadyState.jsx mode change 100755 => 100644 src/panel/states/SkeletonState.jsx mode change 100755 => 100644 src/style.css mode change 100755 => 100644 vite.config.js diff --git a/.gitignore b/.gitignore old mode 100755 new mode 100644 diff --git a/.opencode/skills/motion/SKILL.md b/.opencode/skills/motion/SKILL.md deleted file mode 100755 index 8ad8b65..0000000 --- a/.opencode/skills/motion/SKILL.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -name: motion -description: > - Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank/layout thrash via code or runtime, searching Motion docs or examples, adding a Motion UI section, or upgrading between Motion versions. -argument-hint: "[subcommand or question, e.g. 'audit src/Modal.tsx', 'spring bounce 0.3', 'upgrade', 'how do I animate a list']" ---- - -# Motion - -Animation for the web, done properly. - -- [Animation best practices](best-practices/index.md): "Animate this button", "Fade this layer in", "Animate this Vue component". Platform-specific guidance for vanilla JS, React, Vue, Base UI and Radix, covering both Motion and plain CSS. -- [Documentation, examples and Motion UI search](codex/index.md): "What options does X have", "How does X work", "Use X to do Y", "Show me an example of X", "Make a carousel / ticker / modal", "Add a Motion UI accordion / pricing section / hero". -- [CSS spring and bounce generation](css-spring/index.md): "Generate a CSS spring with a bounce of 0.5 over 0.3s", "Make this bouncier", "Give me a bounce easing". -- [MotionScore performance audit](performance-audit/index.md): "Audit src/Modal.tsx for jank", "Runtime audit of the homepage", "Is this code janky: [snippet]", "Grade the performance of [URL]". You may also run audits proactively and report what you find. Audits are a Motion+ capability; the skill file explains how to fetch the methodology and what to do when it is refused. -- [Transition preview](transition-preview/index.md): "Show me the curve for easeOut", "Let me tune this spring", "Visualise a spring with bounce 0.5". - -## Upgrading Motion - -"/motion upgrade", "migrate from framer-motion", "upgrade to Motion 12" and -similar all resolve through documentation search — there is no separate tool. - -1. **Read the installed version first.** Check `package.json` for `motion`, - `framer-motion` or `motion-v` before searching. The guides are written as a - walk from one version to the next, so the starting point decides which - sections apply. -2. Search the codex for `upgrade` on the project's platform. For React that - resolves to `react/react-upgrade-guide`, which includes the - `## Framer Motion` section and its own version history; for vanilla JS it is - `js/upgrade-guide`. Coming from GSAP, search `migrate from gsap`. -3. **Read the whole page and follow it in order. Do not summarise it.** Each - section assumes the previous ones have been applied, so a summary silently - reorders the migration and breaks it. -4. Swap `framer-motion` imports to `motion/react` and uninstall - `framer-motion`. They must never both be installed. - -## Tiers - -Best practices, search and easing generation work without an account. The -rest is tiered, and the tools say so when you reach them: - -- **A Motion account** (free): saving a transition. Run the Motion+ MCP - server, signed in from the editor's MCP settings. -- **Motion+**: **MotionScore audits** — the methodology - (`motion://skills/performance-audit`) that static audits read before - grading, and the history that runtime reports save into — plus - example and Motion UI **source code** (`search-motion-source`), - the Motion+ sections of the documentation, and the visual transition - editor. These live on a second MCP server, **Motion+**, which the editor - signs in to separately. Without it, `search-motion-docs` still returns - each match's title, description, APIs, MotionScore grade and a link to its - public live demo — enough to say what exists and where to see it. Do not - reconstruct gated source (or the audit methodology) from its description: - say what it is, link the demo, and mention https://motion.dev/plus once. - -## If the Motion MCP server is unavailable - -`best-practices/` is self-contained and works with no server at all — use it -directly. Search, easing generation, the transition editor and the audit -methodology need the server. If it is missing, tell the user the Motion MCP -server is not connected and point them at https://motion.dev/docs/ai-kit. diff --git a/.opencode/skills/motion/best-practices/base-ui.md b/.opencode/skills/motion/best-practices/base-ui.md deleted file mode 100755 index 9a5f014..0000000 --- a/.opencode/skills/motion/best-practices/base-ui.md +++ /dev/null @@ -1,106 +0,0 @@ -# Animating Base UI with Motion for React - -Rules for integrating Motion animations with Base UI components. - -## Adding Animations - -Pass a `motion` component via the Base UI `render` prop: - -```jsx -
- Lana Del Rey, an iconic American singer-songwriter, is celebrated for
- her melancholic and cinematic music style. Born Elizabeth Woolridge
- Grant in New York City, she has captivated audiences worldwide with her
- haunting voice and introspective lyrics.
Her songs often
- explore themes of tragic romance, glamour, and melancholia, drawing
- inspiration from both contemporary and vintage pop culture.
-
- The Weeknd, born Abel Tesfaye, is a Canadian artist known for blending - R&B, pop, and synthwave into his unique sound. His track "Blinding - Lights" became a global sensation, defining the sound of the 2020s with - its retro vibes and emotional depth. -
- ), - }, - { - description: "Billie Eilish", - title: "Happier Than Ever", - src: "https://i.scdn.co/image/ab67616d0000b2732a038d3bf875d23e4aeaa84e", - ctaText: "Play", - - content: ( -- Billie Eilish redefined pop music with her haunting vocals and dark, - intimate lyrics. Her song “Happier Than Ever” showcases her range and - emotional storytelling, transforming from quiet melancholy to raw - intensity. -
- ), - }, - { - description: "Taylor Swift", - title: "All Too Well", - src: "https://i.scdn.co/image/ab67616d0000b273da5d5aeeabacacc1263c0f4b", - ctaText: "Play", - - content: ( -- Taylor Swift is celebrated for her narrative songwriting and evolution - across genres. “All Too Well (10 Minute Version)” is a masterclass in - storytelling, capturing heartbreak with vivid emotional detail. -
- ), - }, - { - description: "Post Malone", - title: "Circles", - src: "https://i.scdn.co/image/ab6761610000f178b645c02cfa05103299775097", - ctaText: "Play", - - content: ( -- Post Malone blends hip-hop, rock, and pop effortlessly. “Circles” is a - reflective anthem about love and repetition, showcasing his melodic - instincts and laid-back vocal delivery. -
- ), - }, -]; - -const navItems = [ - { - title: "Home", - href: "/", - }, - { - title: "About", - href: "/about", - }, - { - title: "Contact", - href: "/contact", - }, - { - title: "Login", - href: "/login", - }, -]; - -const ExpandableCardList = () => { - const [currentCard, setCurrentCard] = useState(null); - const [hovered, setHovered] = useState(null); - - const cardRef = useRef(null); - - // TODO: Missing keyboard accessibility (Escape key to close) - // Improvement: Add keyboard event listener for Escape key - // Example: - // const handleKeyDown = useCallback((e) => { - // if (e.key === 'Escape' && currentCard) setCurrentCard(null); - // }, [currentCard]); - - useEffect(() => { - // Only add the listener if a card is currently open - if (!currentCard) return; - - // TODO: Event handler should be memoized with useCallback - // Improvement: Move handleClickOutside outside useEffect and wrap with useCallback - // This prevents recreating the function on every render - const handleClickOutside = (event) => { - // Check if the click is outside the card element - if (cardRef.current && !cardRef.current.contains(event.target)) { - setCurrentCard(null); // Closes the card - } - }; - - // Add event listener to the whole document - document.addEventListener("mousedown", handleClickOutside); - - // Cleanup function to remove the event listener - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, [currentCard]); - - //NOTE: - // The main concept of the switching between list and detailed view is implemented using layoutId prop from motion library. When a card is clicked, its layoutId matches the one in the detailed view, enabling a smooth transition i.e. from list to detailed view and vice versa since both views share the 'same' layoutId. - - const handleCardClick = (card) => { - setCurrentCard(card); - }; - - return ( -- Your workspace is set. Focus sessions can now generate reflection reels. -
- - - Continuing… - -
!3l!2Lo>bq<}U^$
z`F>)1aNFfjwTpnj PQGX6L;*rTR5N?HnsFTa9xI$;ESA=l&hp$pI*m6jyeL_GNG
zYbjD|Inm{>QY2V>TYsmf$9-@NanT7~@i=CZN#
z>`Z@O;w>Wt0RHDVk8v-g8KeL+LaPuOB>Z~K$W54<^{PS!rzJLxBeMsB$DvunQRTy=
z6boCh1)KW$z-j
@cQ)vl&x
z6&|8~0R$iXLfy}{^_=yLE$(l=htrHQ;aD;BL{YwuA7Za4cg~b{JHFfN@XxKn?>e+{
zM7kC6rD%BXul2`@ygoXBJmRCQcGW#nIsagIy1!D-BoZDsRk;=okT9O7oV-v%RPrRv
zaJGoQbnq(N9me?r!Oy5gO_rg{z9v*jAL7>aJmGd#vLlH-ihg#HkD*1%;2({QC~sqi
z4DQ%YH*?G8otbQ3T%1dD!t>=S+pD`{S{Wg7;nqnz!H#`R9mnCZ0WN;%TO~DUO$trf
zEAh>m;oxUGgEiysQUk~RA#xS_z>~D1ro9Nq7r!K+ZTwpij=;Y*vn;CYJ&IfMDlgY_
z9qNLZommq%qyNDcxt}~C#(ZA^3W5#wY!QC2Ti%AZX#(
51bLF&nKZAu(fLS^#N}tnefyiO
zQ!AjCh7FfmC6{?V)7
QqKue>HeG1*mXHP@sOu6|Mh3IC*$?tMNaV~aHVUee}uC~#2maR7p`
z4fO-dHE1KQ5T$UVVlVA;^