mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
33 lines
810 B
TypeScript
33 lines
810 B
TypeScript
import code from '@content/Animations/Cubes/Cubes.vue?raw';
|
|
import type { CodeObject } from '../../../types/code';
|
|
|
|
export const cubes: CodeObject = {
|
|
cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Cubes`,
|
|
installation: `npm install gsap`,
|
|
usage: `// CREDIT
|
|
// Component inspired from Can Tastemel's original work for the lambda.ai landing page
|
|
// https://cantastemel.com
|
|
|
|
<template>
|
|
<Cubes
|
|
:grid-size="10"
|
|
:max-angle="45"
|
|
:radius="3"
|
|
easing="power3.out"
|
|
:duration="{ enter: 0.3, leave: 0.6 }"
|
|
border-style="1px solid #fff"
|
|
face-color="#0b0b0b"
|
|
:shadow="false"
|
|
:auto-animate="true"
|
|
:ripple-on-click="true"
|
|
ripple-color="#fff"
|
|
:ripple-speed="2"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Cubes from "./Cubes.vue";
|
|
</script>`,
|
|
code
|
|
};
|