Luca Perullo

Components

Pixel-perfect, fatti per essere usati.

Una libreria di componenti React + Tailwind che uso ogni giorno nei progetti reali. Ogni componente ha preview live, codice copiabile, e un prompt pensato per Claude/ChatGPT per riadattarlo al tuo brand in un colpo solo.

Totale
0+0 new
Live
0
WIP
0
Soon
0
Latest

Featured01

Le novità più recenti, con preview live. Niente trick, niente iframe.

Featured

LiveNew
Section Label

Heading di sezione con indice mono in apice — il marker editoriale del sito.

Apri

About01

Caption variant02

Catalogo02

Pronti da usare

68 componenti

Codice pubblicato, copy & paste sicuro.

  • Section LabelLive
    Heading di sezione con indice mono in apice — il marker editoriale del sito.
    HeadingEditorialServer
  • Stripe RuleLive
    Divisore diagonale a hatch: il separatore visivo fra sezioni.
    LayoutDecorativoServer
  • Social TileLive
    Riga social con icona dentro chip dark, label e handle, freccia hover.
    LinkConnectServer
  • Verified BadgeLive
    Spunta blu stile X/Twitter, pura SVG, eredita il colore accent.
    BadgeIdentitàSVG
  • Theme ToggleLive
    Toggle light/dark senza flicker, persistito su localStorage, due bottoni segmented.
    TemaClientPersistenza
  • Status PillLive
    Pill mono con dot colorato per stato (Live, WIP, Soon, Note). Coerente fra Tools e Components.
    BadgeStatoServer
  • Pull QuoteLive
    Citazione editoriale con rail verticale, kicker mono e attribuzione.
    EditorialeTipografiaServer
  • Stat CardLive
    KPI card minimale con kicker mono, valore tabular-nums e delta direzionale.
    DashboardKPIServer
  • KbdLive
    Chip tastiera con glifi sistema (⌘ ⇧ ⌥ ↵) e shadow tattile.
    TastieraInlineServer
  • CalloutLive
    Avviso inline con rail accent, kicker mono, icona toned, action opzionale.
    InlineAvvisoServer
  • Copy ButtonLive
    Bottone copy con feedback 'Copiato', tre toni (primary / secondary / ghost), modalità icon-only.
    ClientClipboardAction
  • Code BlockLive
    <pre> framato con toolbar lingua/file e Copy button, scroll capped, opzione hover-only.
    CodeEditorialServer
  • Preview FrameLive
    Cornice live-preview con label rail e backdrop opzionale (flat / grid / hatch).
    LayoutPreviewServer
  • Preview TabsLive
    Tabs Preview/Code con underline animato, accessibili (role tablist), zero dipendenze radix.
    TabsClientA11y
  • MarqueeLive
    Striscia infinita CSS, hardware-accelerated, fade ai bordi, pausa su hover.
    MotionCSS-onlyServer
  • Number FlowLive
    Counter morph: parte da 0, raggiunge il valore con ease-out e blur-rise.
    MotionStatClient
  • Bento TileLive
    Card decorativa: due render path — solo preview frozen, oppure icon+kicker+name etichettato.
    BentoDecorativoServer
  • Parallax LaneLive
    Wrapper client che traduce il contenuto al ritmo dello scroll con curva tanh asintotica.
    MotionClientScroll
  • Scroll VideoLive
    Image-sequence player scroll-driven (alla Apple): WebP frames + canvas + sticky pin per effetto premium.
    PremiumScrollClient
  • Blob MixerLive
    Sculpture WebGL: icosfera ad alta risoluzione deformata da simplex-noise, 12 preset materiali (chrome, vetro, plasma, lava, perla…) che si crossfadano live.
    3DShaderWebGLR3FPostprocessing
  • Blur TextLive
    Reveal editoriale: ogni parola sfuma da blur a fuoco quando entra nel viewport.
    TextAnimationEditorialClient
  • Split TextLive
    Reveal teatrale: ogni carattere o parola scivola verso l'alto da un wrapper overflow-hidden.
    TextAnimationHeroClient
  • Shiny TextLive
    Riflesso metallico in loop su una stringa — il "premium SaaS CTA" sweep.
    TextAnimationCTAClient
  • Spotlight CardLive
    Card con riflettore radiale che segue il puntatore — il pattern più screenshottato di Aceternity.
    CardHoverPremiumClient
  • Border BeamLive
    Un cometa luminosa percorre il bordo della card su un loop — Magic UI signature.
    CardBorderAnimationClient
  • Tilt CardLive
    Parallax 3D che insegue il puntatore — il pattern Apple/Perplexity.
    Card3DHoverClient
  • Animated BeamLive
    Cometa SVG che viaggia su una curva tra due nodi — il pattern Magic UI "X works with Y".
    DiagramSVGAnimationClient
  • Testimonial CarouselLive
    Slider di testimonial con auto-advance, pause-on-hover, dot indicators e tastiera.
    ConversionCarouselSocial ProofClient
  • Command PaletteLive
    Cmd+K launcher con fuzzy filter, gruppi, navigazione tastiera e portal.
    Power UserSearchModalClient
  • AI Chat BubbleLive
    Bolla messaggio production-grade per app AI: streaming-aware, markdown safe, copia su hover.
    AIChatStreamingMarkdownClient
  • AI Prompt InputLive
    Input chat moderno: textarea auto-grow, attachments, slash commands, send/stop morphing.
    AIChatInputFormClient
  • AI Tool Call CardLive
    La card "Searching the web…" che ChatGPT/Claude/Cursor mostrano durante un tool call.
    AIStatusCardClient
  • Rainbow ButtonLive
    Bottone neutro su un alone arcobaleno animato. Buono per CTA prima visita, niente di più.
    ButtonEffectClient
  • Shimmer ButtonLive
    Pillola scura con cometa che corre sul bordo. La versione bottone della BorderBeam.
    ButtonEffectClient
  • Ripple ButtonLive
    Onde Material-style al click. Nessuna libreria, solo span injettati con animazione CSS.
    ButtonInteractionClient
  • Shiny ButtonLive
    CTA solido invertito con sweep diagonale glossy on hover. Solo CSS.
    ButtonHoverCSS
  • Pulsating ButtonLive
    CTA solido con due ring concentrici che pulsano fuori. Beacon sobrio per l'azione primaria.
    ButtonAnimationCSS
  • Interactive Hover ButtonLive
    Due stati: a riposo dot + label, on hover il dot riempie e una nuova label appare con freccia.
    ButtonHoverCSS
  • Aurora TextLive
    Gradient aurora iridescente sul testo. background-clip: text + animazione background-position.
    TextAnimationCSS
  • Typing AnimationLive
    Typewriter classico con caret blinking. Quando finisce, il caret resta fermo.
    TextTypewriterClient
  • Hyper TextLive
    Caratteri scramble in glifi random prima di sistemarsi sulla parola finale, da sinistra a destra.
    TextScrambleClient
  • Word RotateLive
    Cicla un array di parole con translateY + opacity + blur. Inherit del font dal parent.
    TextRotateClient
  • Sparkles TextLive
    Testo con sparkle SVG (stelle a 4 punte) che spawn-ano e si dissolvono attorno.
    TextEffectClient
  • Morphing TextLive
    Due layer di testo si morfano (blur + opacity + translate) tra una stringa e l'altra.
    TextMorphClient
  • Line Shadow TextLive
    Headline con ombra fatta di striscioline diagonali, in stile editorial poster.
    TextShadowCSS
  • Text RevealLive
    Testo lungo si illumina parola-per-parola mentre scrolli sul container. fg-soft → fg.
    TextScrollClient
  • Dot PatternLive
    Background a griglia di pallini, SVG pattern crisp a qualsiasi zoom.
    BackgroundPattern
  • Grid PatternLive
    Background a griglia di linee, SVG pattern. Opzionalmente accende celle specifiche.
    BackgroundPattern
  • Animated Grid PatternLive
    Stessa griglia di GridPattern, ma celle random si accendono e dissolvono in loop.
    BackgroundPatternClient
  • Retro GridLive
    Griglia synthwave anni 80 in prospettiva verso l'orizzonte. CSS perspective + rotateX.
    BackgroundRetro
  • Flickering GridLive
    Canvas di celle che lampeggiano random. ResizeObserver, devicePixelRatio, prefers-reduced-motion.
    BackgroundCanvasClient
  • RippleLive
    Onde concentriche che si espandono dal centro come un sonar. Solo CSS, nessun JS.
    BackgroundSonar
  • Light RaysLive
    Fasci di luce sottili attraversano la superficie da un'origine in alto al centro.
    BackgroundLight
  • Warp BackgroundLive
    Effetto iperspazio: striscioline radiali che corrono dal centro verso i bordi.
    BackgroundEffect
  • Shine BorderLive
    Wrapper card con bordo conic-gradient che ruota lentamente attorno al contenuto.
    EffectBorderCard
  • Magic CardLive
    Card che si illumina sotto il cursore con un radial spotlight morbido. Hover gated.
    EffectHoverClient
  • Glare HoverLive
    Riflesso glossy che segue il cursore sulla card. Hover-only, gated a fine pointer.
    EffectHoverClient
  • MeteorsLive
    Strisce diagonali tipo meteora che cadono dal lato superiore. Pure CSS keyframes.
    EffectBackgroundClient
  • ParticlesLive
    Canvas con particelle che vagano e si scostano dal cursore. ResizeObserver + DPR-aware.
    BackgroundCanvasClient
  • Animated Theme TogglerLive
    Toggle tema con wipe circolare dal punto di click. View Transitions API + fallback.
    ThemeTransitionClient
  • Safari MockLive
    Mock finestra Safari div-based: traffic-lights + URL pill + content slot. Niente SVG da modificare.
    MockDeviceShowcase
  • iPhone MockLive
    Frame iPhone 15 Pro: dynamic island (v2) o notch (v1) + tasti laterali volume/azione/power.
    MockDeviceiOS
  • Android MockLive
    Frame Pixel-style: corner radius più stretto, punch-hole per fotocamera frontale, niente island.
    MockDeviceAndroid
  • TerminalLive
    Mock di una sessione zsh con traffic-lights, font mono, righe Command/Output/Typing componibili.
    MockCodeShowcase
  • DockLive
    Dock macOS-style con magnification per prossimità del cursore. Componibile via DockIcon.
    NavigationmacOSClient
  • Avatar CirclesLive
    Riga di avatar circolari sovrapposti + pillola "+N" per overflow. Server component.
    SocialList
  • Orbiting CirclesLive
    Children orbitano un centro su un percorso circolare. Anello SVG opzionale come visual reference.
    LayoutAnimation
  • File TreeLive
    Sidebar gerarchica file/cartelle con folder collapsable. Mono font, Lucide icons.
    CodeSidebarClient

Come si usa03

  1. 1. Scegli un componente. Ogni pagina ha preview, codice e dipendenze.
  2. 2. Copia il codice o il prompt. Il codice è pronto per src/components/; il prompt è pronto per Claude/ChatGPT.
  3. 3. Adatta i token. Sostituisci --bg / --fg / --accent con i tuoi.
Esempio mini-previewlive · server

Live preview01

Tutte le anteprime girano sul tuo stesso runtime — niente iframe, niente trucchi.