Skip to content

Add reusable dashboard animation components #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
varshu55 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add reusable dashboard animation components #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2685dee
Add reusable dashboard animation components
varshu55 Jul 22, 2026
b9bea1c
Merge upstream/main
varshu55 Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions frontend/src/components/Animation/AnimatedCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import type { ReactNode } from "react";
import AnimationWrapper from "./AnimationWrapper";

interface AnimatedCardProps {
children: ReactNode;
delay?: number;
className?: string;
}

export default function AnimatedCard(props: AnimatedCardProps) {
return <AnimationWrapper {...props} type="scale" />;
}
57 changes: 57 additions & 0 deletions frontend/src/components/Animation/AnimationWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import type { ReactNode } from "react";
import { motion } from "framer-motion";

import { fadeIn, slideUp, slideLeft, scaleIn } from "@/utils/animationConfig";
import { useInViewAnimation } from "@/hooks/useInViewAnimation";
Comment on lines +1 to +5

@coderabbitai coderabbitai Bot Jul 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify tsconfig doesn't enable UMD global React access, and check for a global React import elsewhere.
fd tsconfig.json | xargs cat
rg -n 'allowUmdGlobalAccess'

Repository: 7-Blocks/Kepler

Length of output: 272

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== tsconfig.app.json ==\n'
cat -n tsconfig.app.json

printf '\n== tsconfig.node.json ==\n'
cat -n tsconfig.node.json

printf '\n== AnimationWrapper.tsx ==\n'
cat -n frontend/src/components/Animation/AnimationWrapper.tsx

Repository: 7-Blocks/Kepler

Length of output: 228

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== tsconfig.app.json ==\n'
cat -n tsconfig.app.json

printf '\n== tsconfig.node.json ==\n'
cat -n tsconfig.node.json

printf '\n== AnimationWrapper.tsx ==\n'
cat -n frontend/src/components/Animation/AnimationWrapper.tsx

printf '\n== React namespace usage ==\n'
rg -n 'React\.Ref|from "react"' frontend/src/components frontend/src -g '!**/node_modules/**' || true

Repository: 7-Blocks/Kepler

Length of output: 228

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== repository tsconfig files ==\n'
fd -a 'tsconfig*.json' .

printf '\n== AnimationWrapper.tsx ==\n'
fd -a 'AnimationWrapper.tsx' .

printf '\n== nearby React.Ref usages ==\n'
rg -n 'React\.Ref|from "react"' frontend -g '!**/node_modules/**' || true

Repository: 7-Blocks/Kepler

Length of output: 1824

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== frontend/tsconfig.json ==\n'
cat -n frontend/tsconfig.json

printf '\n== AnimationWrapper.tsx ==\n'
cat -n frontend/src/components/Animation/AnimationWrapper.tsx

Repository: 7-Blocks/Kepler

Length of output: 2036

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== frontend/tsconfig.app.json ==\n'
cat -n frontend/tsconfig.app.json

printf '\n== package files mentioning react / typescript ==\n'
rg -n '"react"|"typescript"|`@types/react`|jsx' frontend/package.json frontend/package-lock.json frontend/pnpm-lock.yaml frontend/yarn.lock 2>/dev/null || true

Repository: 7-Blocks/Kepler

Length of output: 8147

Import Ref instead of using React.Ref
AnimationWrapper.tsx is a module and doesn’t import the React namespace, so ref={ref as React.Ref<HTMLDivElement>} will fail type-checking under this tsconfig. Use import type { Ref } from "react"; and cast to Ref<HTMLDivElement> instead.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Animation/AnimationWrapper.tsx` around lines 1 - 5,
Update AnimationWrapper’s React type imports to include Ref, then change the ref
cast from React.Ref<HTMLDivElement> to Ref<HTMLDivElement> so the module no
longer relies on an unimported React namespace.


type AnimationType = "fade" | "slideUp" | "slideLeft" | "scale";

interface AnimationWrapperProps {
children: ReactNode;
type?: AnimationType;
delay?: number;
duration?: number;
className?: string;
once?: boolean;
}

const variantsMap = {
fade: fadeIn,
slideUp: slideUp,
slideLeft: slideLeft,
scale: scaleIn,
};

export default function AnimationWrapper({
children,
type = "fade",
delay = 0,
duration,
className,
once = true,
}: AnimationWrapperProps) {
const { ref, isInView, prefersReducedMotion } =
useInViewAnimation({ once });
Comment on lines +33 to +34

if (prefersReducedMotion) {
return <div className={className}>{children}</div>;
}

const variants = variantsMap[type];

return (
<motion.div
ref={ref as React.Ref<HTMLDivElement>}
className={className}
variants={variants}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
transition={{
delay,
...(duration ? { duration } : {}),

@codeant-ai codeant-ai Bot Jul 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The duration override uses a truthy check, so passing duration={0} is treated as “not provided” and silently ignored. This makes zero-duration transitions impossible and can cause unexpected animation timing; switch to an explicit undefined check so 0 remains a valid value. [falsy zero check]

Severity Level: Major ⚠️ 
- ⚠️ Zero-duration animations impossible when using AnimationWrapper.
- ⚠️ Future dashboard animation timing overrides behave unexpectedly.
Steps of Reproduction ✅ 
1. In `frontend/src/components/Animation/AnimationWrapper.tsx:25-32`, note
`AnimationWrapper` accepts an optional `duration?: number` prop and passes it into the
Framer Motion `transition` object at lines 49-52.

2. Observe at `frontend/src/components/Animation/AnimationWrapper.tsx:49-52` that
`transition` is constructed as `transition={{ delay, ...(duration ? { duration } : {}),
}}`, meaning only truthy `duration` values are spread.

3. A developer who wants an instant (zero-duration) animation uses `AnimationWrapper`
directly, e.g. in `frontend/src/pages/Dashboard.tsx` alongside existing imports (lines
3-7), by rendering `<AnimationWrapper duration={0}>...</AnimationWrapper>` for a dashboard
section.

4. At runtime, because `duration` is `0` (falsy), the spread `...(duration ? { duration }
: {})` contributes an empty object; Framer Motion receives no `duration` override and
applies its default timing, so the animation is not instant despite `duration={0}` being
passed.

Fix in Cursor Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** frontend/src/components/Animation/AnimationWrapper.tsx
**Line:** 51:51
**Comment:**
	*Falsy Zero Check: The duration override uses a truthy check, so passing `duration={0}` is treated as “not provided” and silently ignored. This makes zero-duration transitions impossible and can cause unexpected animation timing; switch to an explicit undefined check so `0` remains a valid value.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

}}
Comment on lines +49 to +52
>
{children}
</motion.div>
);
}
13 changes: 13 additions & 0 deletions frontend/src/components/Animation/FadeIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { ReactNode } from "react";
import AnimationWrapper from "./AnimationWrapper";

interface FadeInProps {
children: ReactNode;
delay?: number;
duration?: number;
className?: string;
}

export default function FadeIn(props: FadeInProps) {
return <AnimationWrapper {...props} type="fade" />;
}
Comment on lines +11 to +13
13 changes: 13 additions & 0 deletions frontend/src/components/Animation/SlideIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { ReactNode } from "react";
import AnimationWrapper from "./AnimationWrapper";

interface SlideInProps {
children: ReactNode;
delay?: number;
duration?: number;
className?: string;
}

export default function SlideIn(props: SlideInProps) {
return <AnimationWrapper {...props} type="slideUp" />;
}
28 changes: 28 additions & 0 deletions frontend/src/hooks/useInViewAnimation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useRef } from "react";
import { useInView, useReducedMotion } from "framer-motion";

interface UseInViewAnimationOptions {
once?: boolean;
amount?: "some" | "all" | number;
}

export const useInViewAnimation = (
options: UseInViewAnimationOptions = {}
) => {
const { once = true, amount = 0.2 } = options;

const ref = useRef<HTMLElement | null>(null);

const isInView = useInView(ref, {
once,
amount,
});

const prefersReducedMotion = useReducedMotion();

return {
ref,
isInView,
prefersReducedMotion,
};
};
Comment on lines +9 to +28
58 changes: 58 additions & 0 deletions frontend/src/utils/animationConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import type { Variants } from "framer-motion";
export const fadeIn: Variants = {
hidden: {
opacity: 0,
},
visible: {
opacity: 1,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
Comment on lines +6 to +12

@coderabbitai coderabbitai Bot Jul 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the referenced files and nearby lines.
for f in frontend/src/utils/animationConfig.ts frontend/src/components/AnimationWrapper.tsx frontend/src/pages/Dashboard.tsx; do
  if [ -f "$f" ]; then
    echo "===== $f ====="
    wc -l "$f"
    sed -n '1,220p' "$f"
    echo
  else
    echo "MISSING: $f"
  fi
done

Repository: 7-Blocks/Kepler

Length of output: 10239

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Locate the animation components referenced by Dashboard.tsx and inspect their implementations.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
  'export default|function FadeIn|const FadeIn|function SlideIn|const SlideIn|function AnimatedCard|const AnimatedCard|transition' \
  frontend/src/components frontend/src/utils frontend/src/pages

echo "---- FILE LIST ----"
git ls-files 'frontend/src/components/**' 'frontend/src/utils/**' | sed -n '1,200p'

Repository: 7-Blocks/Kepler

Length of output: 17981

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the animation component implementations referenced in Dashboard.tsx.
for f in \
  frontend/src/components/Animation/AnimatedCard.tsx \
  frontend/src/components/Animation/FadeIn.tsx \
  frontend/src/components/Animation/SlideIn.tsx \
  frontend/src/utils/animationConfig.ts
do
  if [ -f "$f" ]; then
    echo "===== $f ====="
    wc -l "$f"
    sed -n '1,220p' "$f"
    echo
  else
    echo "MISSING: $f"
  fi
done

Repository: 7-Blocks/Kepler

Length of output: 2334

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find and inspect the animation wrapper components used by Dashboard.tsx.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
  'AnimatedCard|FadeIn|SlideIn|variants|transition|delay' frontend/src/components

echo "---- candidate files ----"
fd -HI 'AnimatedCard.tsx|FadeIn.tsx|SlideIn.tsx|Animation.*\.tsx' frontend/src/components

Repository: 7-Blocks/Kepler

Length of output: 10115

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Read the animation wrapper to determine how transition is composed.
f=frontend/src/components/Animation/AnimationWrapper.tsx
echo "===== $f ====="
wc -l "$f"
sed -n '1,220p' "$f"

Repository: 7-Blocks/Kepler

Length of output: 1536

🌐 Web query:

Framer Motion variants transition component transition default override delay duration docs

💡 Result:

In Framer Motion, transition properties defined directly on a motion component as the transition prop serve as a global override that takes precedence over any transition settings defined within variants [1][2]. Key rules for transition overrides and defaults: 1. Component Transition Prop Priority: When you define a transition prop on a motion component, it overrides the transition object defined inside your active variant [1]. For example, if your variant specifies a duration: 0.5 but you add transition={{ duration: 2 }} to the component, the animation will use the 2-second duration [1]. 2. Default vs. Specific Transitions: Transitions can be defined globally for a component or specifically for individual animation values (e.g., opacity, x, scale) [2]. You can provide a default key within your transition object to set a fallback for all values, which is then overridden by property-specific keys [2]. 3. Orchestration Properties: Orchestration settings like delayChildren and staggerChildren are typically defined within the transition object of a parent component's variants [3][4]. These are specific to variant propagation and are not overridden by a standard transition prop on the child components themselves in the same way simple timing properties are [3][5]. 4. Inheritance: By default, child components do not inherit transitions from parents. You can enable inheritance by setting inherit: true within a child's transition prop [3][2]. This allows the child to inherit parent values while still allowing the child to override specific properties [2]. 5. Handling Complex Overrides: If you need to override a delay or duration dynamically or conditionally (e.g., changing behavior after an initial mount), common patterns include: - Using dynamic variants: Define your variants as functions that accept a custom prop to compute transition values at runtime [6][4]. - State management: Use a React state variable to update the transition prop or the custom prop dynamically based on animation events like onAnimationComplete [7]. For more specific timing requirements, properties like visualDuration (where supported) will override duration to provide a consistent visual timing [3].

Citations:

🌐 Web query:

site:framer.mighty.guide variant transition component transition priority delay duration

💡 Result:

In Framer Motion, the transition property defines the animation physics, such as duration, delay, easing, and spring properties [1]. When using both variants and the transition component prop, the transition prop defined directly on the motion component acts as the default animation configuration. However, if a transition is defined within a specific variant, it will take precedence for that variant state [1]. Regarding precedence and configuration: 1. Variant Precedence: If you define a transition inside a variant, it overrides the default transition defined on the component for that specific state [1]. 2. Property-Specific Overrides: The transition property allows you to define global settings for all animated properties, but you can override these for specific properties (e.g., separate settings for rotate versus scale) [1]. When you define transition settings for a specific property, the global values for that property are ignored [1]. 3. Duration and Delay: Duration and delay are standard transition settings. If omitted, duration defaults to 0.3 seconds [1]. When defining separate transition settings for individual properties, you must explicitly include these settings, such as delay and duration, because the global defaults will no longer apply to those specific properties [1][2]. Essentially, the closer a transition definition is to the animated property (i.e., within the variant vs. the component prop), the higher its priority [1]. If global settings are ignored due to a property-specific override, you must redefine all necessary timing parameters for that specific property [1].

Citations:

Move timing out of frontend/src/utils/animationConfig.ts The per-variant transition blocks still override AnimationWrapper’s delay/duration, so FadeIn and AnimatedCard can’t control timing per instance. Keep the variants to pose/opacity/scale only and let the wrapper own timing.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/utils/animationConfig.ts` around lines 6 - 12, Remove the
per-variant transition timing from the animation configuration, including the
visible variant and related pose definitions, leaving only opacity, scale, and
other visual state properties. Ensure AnimationWrapper remains the sole owner of
delay and duration so FadeIn and AnimatedCard can control timing per instance.

};

export const slideUp: Variants = {
hidden: {
opacity: 0,
y: 20,
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
};

export const slideLeft: Variants = {
hidden: {
opacity: 0,
x: 20,
},
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
};

export const scaleIn: Variants = {
hidden: {
opacity: 0,
scale: 0.95,
},
visible: {
opacity: 1,
scale: 1,
transition: {
duration: 0.45,
ease: "easeOut",
},
},
};
Loading