[FEAT]: Migrate Remaining Components #1
Description
Share your suggestion
Vue Bits is here, and your contribution to migrate the remaining components from React Bits is welcome!
Remaining Work
Below, you can find a list of all remaining components to be migrated:
Text Animations
- True Focus
- Scroll Float
- Scroll Reveal
- ASCII Text
- Scramble Text
- Rotating Text
- Glitch Text
- Scroll Velocity
- Variable Proximity
- Text Type
Animations
- Metallic Paint (Difficult)
- Pixel Trail (Difficult)
- Noise
- Crosshair
- Image Trail
- Ribbons
- Splash Cursor
- Meta Balls
- Blob Cursor
- Star Border
Components
- Circular Gallery
- Animated List
- Stack
- Chroma Grid
- Folder
- Model Viewer (Difficult)
- Lanyard (Difficult)
- Magic Bento
- Scroll Stack
- Glass Surface
Backgrounds
- Dark Veil
- Beams
- Galaxy
- Grid Motion
- Balatro
- Dither (Difficult)
- Shape Blur
- Hyperspeed
- Grid Distortion
- Ballpit
- Orb
- Liquid Chrome
Component Migration Steps
- Pick a component from React Bits (Example: https://reactbits.dev/components/tilted-card)
- Create the component structure:
npm run new:component Components TiltedCard- Migrate the component, keeping the same exact functionalities, styling, props, etc.
- Set up the demo component for the newly migrated component
- Test thoroughly - check that the props work as expected, check console for errors, check responsiveness
- Open your Pull Request - include screenshots!
Notes
There are cases where some dependencies on React Bits will not be available for Vue. For those, you will need to find a suitable replacement that can get the job done. (Example: framer-motion -> motion-v)
The most important thing to keep in mind - migrated components should look and feel exactly as they do on https://reactbits.dev - or as close as possible.
Commit Example
In this commit, you can see the full example of migrating the Tilted Card component.
Thank you for your contributions!
Validations
- I have checked other issues to see if my issue was already discussed or addressed