Personal project · Design & front-endLibrary bycategoryLive
previewReusable
code
A visual repertoire.Ready to create.
Effects, components and animations organized to bring new projects to life.
A personal library of 346 interface effects and components, each one live and with its code ready, to pick the best path for every project.346 live effects and components, with the code ready.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
Personal project · Design & front-endLibrary by categoryLive previewReusable codeA visual repertoire.Ready to create.
Effects, components and animations organized to bring new projects to life.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
A personal library of 346 interface effects and components, each one live and with its code ready, to pick the best path for every project.346 live effects and components, with the code ready.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
The library
346 effects, each in its own drawer.
Building many sites means redoing the same effect every time, and forgetting where that good one was. The library keeps everything in one place: effects and components gathered and adapted from open libraries, each one live and with its code ready. Tap or hover over a drawer to open it.
Borders with conic gradients, masks and cinematic effects.
A few from inside- Conic Feixe Girante
- Broken Border
- Dupla Border Rotate
3D tilt, magnetic pull and glow on mouse over.
A few from inside- Tilt 3D com Glare
- Magnetic Effect
- Shine Sweep
Elements that arrive with class: staggered, masked, blur to sharp.
A few from inside- Stagger Reveal
- Mask Reveal
- Blur-to-Sharp
Bento, masonry, scroll-snap and subgrid.
A few from inside- Masonry
- Scroll-Snap Grid
- Subgrid
3D stack, peek, parallax and radial, for heroes and galleries.
A few from inside- 3D Stack Carousel
- Peek Slider
- Parallax Carousel
Frosted glass with depth, in layers.
A few from inside- Glass Basico
- Glass 3-Layer
- Pill Nav Glass
Gold particles, magnetic dots and fluid.
A few from inside- GoldParticles
- Magnetic Dots
- tsParticles Library
Variable fonts, gradient text and springy letters.
A few from inside- Variable Fonts
- Animated Text
- Scroll-driven Text
Film grain, scan lines, RGB split and halftone.
A few from inside- Film Grain
- Scan Lines
- RGB Split
Ripple, spring and morphing button.
A few from inside- Ripple Effect
- Spring Bounce
- Morphing Button
View Transitions, anchoring, scroll and :has(), Web Full only.
A few from inside- Scroll-driven Animations
- View Transitions
- Anchor Positioning
Shimmer, magnetic pull, confetti and click effects.
A few from inside- Shimmer Button
- Confetti Button
- Moving Border Button
Shimmer skeletons, steps, spinners and bars.
A few from inside- Multi Step Loader
- Skeleton Loader
- Spinner Minimal
Floating bars, sidebars, docks, mega menus and tabs.
A few from inside- Floating Navbar
- Sidebar Expansivel
- Animated Tabs
Heroes, FAQ, testimonials, pricing, footers, login and contact.
A few from inside- FAQ Accordion
- FAQ Grid
- FAQ Categorized
Help that pops up in the right place, with spring.
A few from inside- Animated Tooltip
- Link Preview
- Context Menu
Art deco, polaroid, film strip and gold edge.
A few from inside- Art Deco Card
- Wiggly Boxes
- Concentric Pseudo Frame
Buy box, postcode, CPF/CNPJ, Pix, instalments and shipping.
A few from inside- Buy Box PDP
- CEP Auto-preenchimento
- CPF e CNPJ Toggle
346 effects in 18 drawers
The right effect. In the right place.
FiveM and Web compatibility to guide every choice.
Compatibility per effectCompatibility per effectLive ReactLooks get attention. Logic holds the experience.A beautiful effect may simply not work inside the game: FiveM's built-in browser is older than the Chrome at home. That's why every effect in the library comes in two versions, and a switch flips between them. Try it here, the effect is real.
- Runs on
- Yes, transform spin on the layers
- Weight
- ~1,5 kB
fivem.cssSimplified snippet
/* FiveM: cores em hex, giro por transform */
.dupla::before, .dupla::after {
content: ""; position: absolute; inset: -50%;
}
.dupla::before {
background: conic-gradient(transparent 300deg, #d4af37 360deg);
animation: gira 4s linear infinite;
}
.dupla::after { animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }The snippets above are short versions, to show the difference. In the library, every effect carries the full code for both sides.
Search
Typed it wrong? It finds it anyway.
With hundreds of effects, nobody remembers each one's exact name. The library's search forgives a swapped letter, a missing one and an extra one. This one uses the library's real names: try one of the misspelled examples, or type your own.
In the app, the same search opens from any screen with the Ctrl+K shortcut and can look at the open category or the whole library.
Recipes
Three layers, one finished component.
A good component is rarely one effect: it's a shape, a reaction to touch and a way of entering the screen. The recipe builder combines the three layers and a style. Build yours here, every choice updates the preview instantly.
Element
Shape
Interaction
Motion
Style
Tap or hover to see the interaction
The recipe
Product card + Spinning border + Lifts + Slides up · LuxeThe app has 25 elements, from card and button to cart, menu and order timeline, and 6 styles, each combination with CSS ready to copy.
Organization · Reuse · Front-end
Every project feeds the next one.
Templates, references and effects organized to turn repertoire into execution.
Page templatesSection mapReferences and codeAn in-house tool to keep refining the way of creating.What turns an effects library into a tool is knowing when NOT to use each one. Every effect has its own label: what it's for, when it works, when it gets in the way, where it runs and how much it weighs. These are real, taken from the library, tap or hover over the card to flip it.
1.3Dupla Border Rotate
Two conic borders spinning in opposite directions. A hypnotic effect for the main element.
When to use
- Featured cards
- VIP avatars
- Highlighted banners
- Premium loading
1.3Dupla Border Rotate
When not to use
- Several on one screen
- Small elements
- Minimalist look
- Long text
- On FiveM
- Yes, with a transform spin
- On the web
- Chrome 85+
- Weight
- ~1,5 kB
The texts come from the library's own records, only adjusted for reading.
Favorites
The ones used most, always at hand.
In a large library, some effects come back in every project. The star keeps those apart, and a switch shows only them. Star your own: as in the app, the choice is kept in this browser.
3 favorites in the constellation
- Advanced BordersBroken Border
A broken, art deco style border.
- Premium HoverDepth Shift
Depth shifts on mouse over.
- Entry AnimationsMask Reveal
Content appears like a curtain opening.
- Particles and VFXMagnetic Dots
Dots that flee and return with the cursor.
- Premium TypographyAnimated Text
Text that enters with motion.
- Cinematic TexturesScan Lines
Old-screen scan lines.
- MicrointeractionsMorphing Button
A button that changes shape.
- Buttons and CTAsShimmer Button
A diagonal shine crossing the button.
- Loaders and SkeletonsMulti Step Loader
Steps in sequence, with a bar and done marks.
- Page SectionsFAQ Accordion
Questions that open with a smooth animation.
- Frames and OrnamentsArt Deco Card
A frame with 1920s ornamental corners.
- Carousels and Sliders3D Stack Carousel
Cards stacked in 3D perspective.
A sample of 12 of the 346 effects.
The technologies
What it is made of, piece by piece
A single-page site exported as static files: it opens anywhere and needs no server. Pick a piece to see what it does here and which file it is in.
12technologies, in 3 layers
Screen
Motion
Features
The screens
The library on display.
The library from the inside, as it is: black and gold, with the tabs at the top. The screens are in rooms, tap or hover over a frame to switch on the light and click to see it large.
Visual effects
Layout and motion
Advanced and structure
Sections and frames
E-commerce
Real app screens. The amounts and documents shown are samples.
Next project38 / 51
Creative and developer toolsDemo Link ManagerA panel to organize demos of projects still on the computer and send each client the right link, with a ready message and ngrok, LocalTunnel and Cloudflare Tunnel guidesNext.js 14.0React 18.2TypeScript 5.3Tailwind CSS 3.4
← PreviousUIForge