feat: add text slide animation for quotes

[rishabh8870]

• Added text_slide animation option to the animation utilities
• Animation features a smooth 2s linear horizontal slide effect
• Text slides infinitely from left (0px) to right (10px) and back
• Provides an engaging visual effect for quote text in cards
• Addresses issue feat: add text slide in animation for quotes in card #243

Summary by CodeRabbit

Release Notes

• New Features
  • Added a new text slide animation effect that smoothly translates content horizontally with continuous looping behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@rishabh8870 is attempting to deploy a commit to the shravan20's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

A new animation entry named text_slide is added to the animations object in the animation utility file. The animation applies a 2-second linear infinite alternate motion that translates elements horizontally from 0 to 10 pixels.

Changes

Cohort / File(s)	Summary
Animation Configuration frontend/src/util/animation/index.js	Added text_slide animation property with keyframe defining horizontal translation (0 to 10px) and 2s linear infinite alternate timing

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 Hop along the sliding text,
Ten pixels left, then back again,
A gentle sway, so smooth and bright,
Two seconds flowing—pure delight!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a text slide animation specifically for quotes, which matches the changeset that adds a text_slide animation entry to the animations object.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/util/animation/index.js (1)

21-31: Consider increasing the slide distance for a more noticeable effect.

The current animation translates text by only 10px, which is quite subtle and may not provide the "engaging visual effect" described in the PR objectives. Users might barely notice the movement, especially on larger screens or at typical viewing distances.

🔎 Suggested improvements

Consider increasing the translation distance to make the slide effect more prominent:

  text_slide: {
    animation: `animation:text-slide 2s linear infinite alternate;`,
    keyframes: `@keyframes text-slide{
      0% {
        transform: translateX(0);
      }
      100% {
-        transform: translateX(10px);
+        transform: translateX(50px);
      }
    }`,
  },

Additionally, you might consider using ease-in-out instead of linear for a smoother, more natural motion:

  text_slide: {
-    animation: `animation:text-slide 2s linear infinite alternate;`,
+    animation: `animation:text-slide 2s ease-in-out infinite alternate;`,
    keyframes: `@keyframes text-slide{
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(50px);
      }
    }`,
  },

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc57607 and 6ad5068.

📒 Files selected for processing (1)

• frontend/src/util/animation/index.js

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, find the animation file and inspect its content
echo "=== Animation index.js content (lines 1-30) ==="
find . -path ./node_modules -prune -o -name "index.js" -path "*/animation/*" -type f -print | head -5

Repository: zhravan/github-readme-quotes

Length of output: 158

---

🏁 Script executed:

# Check the specific file
cat -n frontend/src/util/animation/index.js | head -30

Repository: zhravan/github-readme-quotes

Length of output: 1161

---

🏁 Script executed:

# Find imports and usages of the animations module
echo "=== Imports of animation module ==="
rg -n "from ['\"].*animation['\"]|import.*animation" --type js --type jsx --type ts --type tsx

echo -e "\n=== Usage of animations object ==="
rg -n -C3 "animations\.(text_slide|grow_out_in|default|[a-z_]+)" --type js --type jsx --type ts --type tsx | head -50

Repository: zhravan/github-readme-quotes

Length of output: 216

---

🏁 Script executed:

# Check how the animation strings are used - are they inline CSS or something else
echo "=== Where animation values are applied ==="
rg -n "animation:" -C2 --type js --type jsx --type ts --type tsx | head -80

Repository: zhravan/github-readme-quotes

Length of output: 159

---

🏁 Script executed:

# Search for where animations might be imported or used, using broader patterns
echo "=== Search for 'animations' references ==="
rg -n "animations" --type js | head -50

echo -e "\n=== Look for jsx/tsx files ==="
find . -path ./node_modules -prune -o \( -name "*.jsx" -o -name "*.tsx" \) -type f -print

echo -e "\n=== Search in all text files for animations usage ==="
rg -n "animations\." | head -50

Repository: zhravan/github-readme-quotes

Length of output: 1196

---

🏁 Script executed:

# Check if there's a style tag or style application in the codebase
echo "=== Search for where keyframes or animations are applied ==="
rg -n "keyframes|style.*animation" --max-count 30

echo -e "\n=== Check main component files ==="
find . -path ./node_modules -prune -o -name "App.*" -o -name "main.*" -o -name "index.*" -type f -print | grep -E "(frontend|src)" | head -20

Repository: zhravan/github-readme-quotes

Length of output: 1825

---

🏁 Script executed:

# Check how the animation properties are used in layouts
echo "=== Layout file usage (around keyframes injection) ==="
cat -n frontend/src/util/layouts/index.js | sed -n '15,25p'

echo -e "\n=== Search for where template.animation.animation is used ==="
rg -n "template\.animation\.animation|animation\.animation" --max-count 20

echo -e "\n=== Look at complete layout template context ==="
cat -n frontend/src/util/layouts/index.js | sed -n '1,50p'

Repository: zhravan/github-readme-quotes

Length of output: 3711

---

🏁 Script executed:

# Check the backend layout as well for comparison
echo "=== Backend layout usage ==="
cat -n src/layouts/layout.js | sed -n '1,50p'

Repository: zhravan/github-readme-quotes

Length of output: 2164

---

Remove the "animation:" prefix from animation property values—they're redundantly injected into CSS selectors.

The animation value at line 22 (and line 8) includes animation: as a prefix: animation:text-slide 2s linear infinite alternate;. When injected via ${template.animation.animation}; in the layout template (frontend/src/util/layouts/index.js:16), this produces invalid CSS with double semicolons and a redundant property name.

Change to:

animation: `text-slide 2s linear infinite alternate;`,

This same issue exists in both the frontend (frontend/src/util/animation/index.js) and backend (src/animations/animation.js) versions.

🤖 Prompt for AI Agents

In frontend/src/util/animation/index.js (lines 8 and 22) and also mirror the
same change in backend src/animations/animation.js, the animation values include
a redundant "animation:" prefix which causes invalid CSS when injected; remove
the literal "animation:" prefix so the values are just e.g. "text-slide 2s
linear infinite alternate;" (no leading property name), keeping the trailing
semicolon if desired, and update any other entries in these files that follow
the same pattern so injections like ${template.animation.animation} produce
valid CSS.