unisone/openclaw-skill-suite

Que fait openclaw-skill-suite ?

Créez des vidéos de démonstration produit de qualité Apple Keynote avec Remotion. Inclut des maquettes de téléphone en verre, des sphères 3D flottantes, des animations de frappe, des interfaces cartes, des effets de vague et des transitions fluides. Utilisez-le lorsqu'on vous demande de créer des démos produit, des vidéos de présentation d'applications, des animations de parcours UI, ou pour toute demande de vidéo promotionnelle soignée.

Composants et Effets

• Maquette téléphone en verre (GlassPhoneMockup) – Téléphone transparent avec reflets 3D, idéal pour afficher des captures d'écran d'applications.
• Sphère flottante (FloatingSphere) – Sphère 3D animée avec effet de lueur, parfaite pour les arrière-plans dynamiques.
• Animation de frappe (TypingAnimation) – Simulation de saisie de code ou de texte, caractère par caractère.
• Interface carte (CardUI) – Cartes élégantes avec ombres portées et animations d'apparition.
• Effet de vague (RippleEffect) – Cercles concentriques qui se propagent, créant un effet dynamique.
• Transitions de scènes – Transitions fluides entre les scènes (fondu, glissement, zoom).

Utilisation

1. Décrivez en langage naturel la vidéo de démonstration que vous souhaitez créer.
2. La compétence générera le code TypeScript utilisant les composants de @remotion/cli et react.
3. Exécutez la commande npx remotion render src/index.tsx output.mp4 pour générer la vidéo.

Exemple

import { Composition } from 'remotion';
import { GlassPhoneMockup } from './components/GlassPhoneMockup';

export const MyDemo: React.FC = () => {
  return (
    <Composition
      id="ProductDemo"
      component={GlassPhoneMockup}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Remarque : Assurez-vous que @remotion/cli est installé dans votre projet (npm install @remotion/cli).