Carte de travail animée utilisant Typescript, Tailwind et Framer Motion

Ce projet présente des composants de carte de travail dynamiques créés avec TypeScript, Tailwind CSS et Framer Motion. Les cartes présentent une animation subtile et attrayante : un dégradé apparaît subtilement au survol et l'image s'incline, améliorant ainsi l'interaction de l'utilisateur.

Démo en direct

// Détecter le thème sombre var iframe = document.getElementById('tweet-1880625972871049553-409'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1880625972871049553&theme=dark" }

Code source et bibliothèques

Le composant work-card.tsx exploite des bibliothèques d'interface utilisateur telles que shadcn (pour la structure de la carte) et 21st.dev (pour l'effet lumineux impressionnant). L'effet lumineux de 21st.dev est particulièrement remarquable et mérite d'être exploré plus en détail sur leur site Web.

work-card.tsx Extrait de code :

<code class="language-typescript">
<card className="group relative w-[800px] rounded-3xl p-8 border-none overflow-hidden bg-[#f5f5f5] mb-10">
  <glow className="group-hover:opacity-100 opacity-0" variant="top"></glow>
  <div className="relative z-10">
    {/* Logo and </code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!