Add hoverSpeed, renderItem props and vertical direction support to LogoLoop

[Copilot]

Enhance LogoLoop component for better flexibility and performance

Summary

This PR enhances the LogoLoop component with new props for better flexibility and control:

1. ✅ hoverSpeed prop - Replaces pauseOnHover with a more flexible speed control

   • Set to 0 for pause (equivalent to old pauseOnHover={true})
   • Set to any value for deceleration effect on hover
   • Maintains backward compatibility with pauseOnHover

2. ✅ renderItem prop - Custom rendering function for logo items

   • Allows users to render custom components for each item
   • Enables custom animations, tooltips, borders, etc.
   • Receives (item, key) as parameters

3. ✅ Extended direction prop - Now supports vertical scrolling

   • Original: 'left' | 'right'
   • New: 'left' | 'right' | 'up' | 'down'
   • Fully supports vertical logo loops

Changes Made

• Updated all 4 component variants
• Updated CSS files for vertical direction support
• Updated demo with new controls (PreviewSelect for direction)
• Updated props documentation
• Removed deprecated props from documentation

Example Usage

// Basic horizontal loop with pause on hover
<LogoLoop
  logos={techLogos}
  speed={120}
  direction="left"
  hoverSpeed={0}
/>

// Vertical loop with deceleration on hover
<LogoLoop
  logos={techLogos}
  speed={80}
  direction="up"
  hoverSpeed={20}
/>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[FEAT]: Enhance LogoLoop for �better flexibility and performance</issue_title>
<issue_description>### Share your suggestion

I'd like to propose a few enhancements. I'd love to hear your thoughts on this.

---

1. Introduce a hoverSpeed prop to replace pauseOnHover. This will allow for new effects like deceleration, while still supporting the current pause functionality (by setting the speed to 0).

2. Add a renderItem prop to let users render their own components for each item (for custom animations, tooltips, etc.).

3. Improve performance if needed.

4. (Optional) Extend the direction prop to support 'up' and 'down'.

Validations

• I have checked other issues to see if my issue was already discussed or addressed</issue_description>

<agent_instructions>Implement the suggested changes. Make sure they are added under all 4 variants of the LogoLoop component (/content, /ts-default, /tailwind, /ts-tailwind), and any required demo showcase is updated in LogoLoopDemo.jsx and logoLoopCode.js. Ignore #3, there is nothing to improve in terms of performance.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [FEAT]: Enhance LogoLoop for better flexibility and performance #671

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[DavidHDev]

@copilot remove this example from the usage code, it's not needed.

[Copilot]

Removed the renderItem example from the usage code as requested. (ec44449)

[DavidHDev]

@copilot if it's deprecated, completely remove the prop from the propTable

[Copilot]

Removed the deprecated pauseOnHover prop from the props table. (9e8db59)

[DavidHDev]

@copilot replace the current PreviewSwitch which changes the direction with a that will allow users to pick between all 4 options. You'll find it under /components/common

[Copilot]

The comment appears to be cut off. What should I replace the direction PreviewSwitch with?

[DavidHDev]

@copilot my bad, replace it with a <PreviewSelect /> component, with the 4 direction options.

[Copilot]

Replaced the direction PreviewSwitch with a PreviewSelect dropdown that supports all 4 direction options (Left, Right, Up, Down). (095f68c)