AI Component Catalogue for React & Next.js

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Not for body copy, legal text, product instructions, forms, dashboards, documentation, pricing copy, or long paragraphs.

Not for accessibility-critical wording or anything the user must read instantly. Distortion is an accent, not a reading strategy.

Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.

Not for body copy, long sentences, legal text, documentation, form labels, error messages, pricing details, or instructions.

Not for unrelated phrase sets. If every flip introduces a new topic, the effect becomes a slot machine for positioning.

Not for headlines where one strong sentence would do the job better.

Not for body copy, labels, error messages, legal copy, instructions, pricing details, or any text users must read immediately.

Not for long paragraphs. Gravity is charming for a headline; it is irritating for a contract.

Not for body copy, documentation, legal text, pricing details, error messages, form labels, instructions, or accessibility-critical content.

Not for long loops, constant blinking, or repeated flicker effects across the page.

Not for calm SaaS pages where trust, clarity, and reading speed matter more than atmosphere.

Not for body copy, legal text, documentation, error messages, form labels, pricing details, or instructions.

Not for long paragraphs. If every line needs time to focus, the page is not cinematic. It is slow.

Not for copy that is weak without motion. Focus Text can pace a good statement; it cannot make a vague one meaningful.

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Not for body copy, documentation, legal text, form labels, error messages, checkout flows, pricing details, or long explanations.

Not for fake security, fake loading, fake encryption, or fake verification claims. A glowing word does not make a weak claim more credible. It only makes the weakness easier to see.

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Not for financial dashboards, compliance tables, legal figures, or analytics screens where exact reading speed matters more than animation.

Not for pages where every number spins. That is not proof; that is a slot machine with a marketing degree.

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Not for body copy, legal text, documentation, pricing details, form labels, instructions, error messages, or any copy that users must read instantly.

Not for long paragraphs. Pixelation is useful for a headline, not for making someone decode a terms-of-service page like it is a corrupted cartridge.

Not for brands where clarity, calm, and immediate trust matter more than digital texture.

Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.

Not for body copy, long headlines, legal text, documentation, form labels, pricing details, error messages, or instructions.

Not for phrases where every word carries essential information and needs immediate readability.

Not for endless loops beside a CTA. A rolling word is memorable once. After the fifth loop, it is just nervous typography.

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Not for body copy, legal text, error messages, instructions, long explanations, pricing details, or anything users need to read immediately.

Not for fake security, fake loading, fake progress, or fake system claims. A typing cursor does not make a vague claim more technical. It only makes it arrive slower.

Not for long body copy, documentation, legal text, pricing details, error messages, form labels, instructions, or dense educational content.

Not for mobile-first pages where pointer proximity cannot be reproduced meaningfully.

Not for weak copy. Variable text can make a sentence feel alive; it cannot make a vague sentence worth reading.

Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost.

Not for long words, paragraphs, documentation, legal text, pricing details, instructions, form labels, or critical messages.

Not for text that must be read instantly. Dot-matrix formation is atmospheric; it should not delay comprehension of important content.

Not for brands where the visual language is soft, editorial, luxury, or calm unless the dot system has been carefully styled to fit.

Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for low-priority links, dense dashboards, destructive actions, form field controls, documentation navigation, or pages that need a plain utility interface.

Not for every CTA. Metallic treatment works because it feels rare. Use it everywhere and the page becomes a showroom for button anxiety.

Not for tiny buttons where the material detail cannot be seen.

Not for destructive actions, unclear states, or places where animation hides the label or delays activation.

Not for every button on the page.

Not for destructive actions, legal confirmations, subtle secondary links, dense dashboards, form controls, or navigation items that should stay quiet.

Not for CTAs with unclear copy. Shine can attract attention, but it cannot make “Click here” worth clicking.

Not for every button on the page.

Not for destructive actions, legal confirmations, dense dashboards, quiet navigation links, or form controls that need utility more than atmosphere.

Not for unclear CTA copy. A spotlight can draw attention to the button, but it cannot make “Submit” feel like a strategy.

Not for dense ecommerce catalogues, pricing tables, testimonial lists, documentation, comparison sections, or content that users need to scan quickly.

Not for large uncurated image sets. A curved carousel should feel selected, not like a folder view with ambition.

Not for pages where direct comparison matters more than presentation. Use a grid when users need to compare items side by side.

Not for critical proof, pricing, feature comparisons, or content users must see to convert.

Not for long comparison sets, dense pricing matrices, or card groups where users need to scan every item quickly.

Not for long lists, dense feature comparisons, pricing tables, testimonials that need quick scanning, legal information, or documentation.

Not for slides with too much text. A dimensional panel is not a brochure page wearing a mask.

Not for pages where the user needs to compare all items at once. Use a grid when comparison matters more than presentation.

Not for dense catalogues, search-driven galleries, pricing content, documentation, comparison tables, forms, or content that needs linear reading.

Not for image sets with no visual relationship. Ellipse Carousel can arrange a collection beautifully, but it cannot create curation where none exists.

Not for sections where the centre message must compete with large moving cards.

Not for pricing, legal copy, critical proof, comparison tables, or content users must see all at once.

Not for long card archives where filtering, search, or a grid would serve the visitor better.

Not for dense product grids, ecommerce catalogues, comparison tables, pricing content, documentation, testimonials that need quick scanning, or image sets with hundreds of items.

Not for pages where users need predictable sorting and fast filtering. A visual orbit is not a replacement for information architecture.

Not for low-quality images. Motion can arrange a weak image set, but it cannot make it worth studying.

Not for dense catalogues, pricing tables, documentation, testimonial lists, product comparison grids, or content users need to scan quickly.

Not for weak images. Strip motion can make a good image feel premium; it cannot rescue a mediocre asset wearing too much transition perfume.

Not for pages where users need immediate image comparison. Use a grid when comparison matters more than presentation.

Not for large archives, pricing, testimonials, dense text, or product sets that require side-by-side comparison.

Not for mobile-first pages unless the ring collapses into a simple swipeable or stacked layout.

Not for pricing, testimonials, critical proof, legal content, or anything users must compare side by side.

Not for pages where a static grid would help users decide faster.

Not for critical proof, pricing, feature comparisons, or content users must see to convert.

Not for comparison tables, pricing cards, legal content, dense documentation, or long card copy that users need to scan quickly.

Not for sections where every card needs to be visible at once before a decision can be made.

Not for important proof, pricing, or long text where rotation makes content feel optional.

Not for testimonials or features that should remain visible as proof at all times.

Not for large product sets, pricing choices, or items that users need to compare side by side.

Not for product groups where orbiting motion makes hierarchy less obvious.

Not for dense matrices where every row and column needs equal scanning weight.

Not for grids where emphasis would misrepresent feature priority or pricing logic.

Not for dense ecommerce catalogues, documentation, pricing sections, comparison tables, forms, testimonials, or content users need to scan quickly.

Not for weak or inconsistent image sets. A helix can make strong visuals feel dimensional; it cannot turn random assets into a curated world.

Not for pages that cannot afford WebGL cost. If the site already has heavy shaders, video backgrounds, and scroll scenes, adding another 3D gallery without budgets is not ambition. It is a performance incident with better lighting.

Not for long mobile-first pages, docs, pricing, or routes where sideways movement would hide orientation.

Not for mobile audiences without a well-tested vertical fallback - horizontal scroll fatigue on touch is real and fast.

Not for dense product lists, accessibility-critical sequences, or pages where perspective makes the active item harder to judge.

Not for routes where search traffic lands mid-sequence and needs immediate context.

Not for utility footers where visitors need immediate links, legal pages, or task flows that should end quickly.

Not for footers that primarily serve as a fast sitemap or legal navigation block.

Not for ecommerce catalogues, image-heavy archives, or pages where speed-to-grid matters more than atmosphere.

Not for pages where image loading speed is the primary conversion variable - parallax offsets add render cycles.

Not for image-critical shopping, documentation, or pages where the picture must stay perfectly stable for evaluation.

Not for pages where motion makes product detail harder to inspect than a still image.

Not for critical comparisons, pricing, or long product lists where a static gallery would be faster.

Not for slide sets where users must compare every item before acting.

Not for large work archives, comparison-heavy portfolios, filterable case-study libraries, or pages where visitors need to scan every project quickly.

Not for project sections where the ribbon hides titles, makes links hard to reach, or turns real work into background texture.

Not for task-heavy pages or large visual sets where angled transitions slow evaluation.

Not for sections where the transition has more personality than the content.

Not for reading-heavy sections, product comparison, pricing, or any content where distortion would fight legibility.

Not for pages with body copy visible during the distortion zone - legibility during motion is a WCAG concern.

Not for ordered steps, ranked proof, or content where sequence communicates priority.

Not for cards with dependent order, legal meaning, or cumulative explanation.

Not for short landing pages, comparison tables, forms, or docs where people need to scan and act quickly.

Not for routes where users frequently land mid-page from search - pinned chapters assume a top-to-bottom read order.

Not for content where the before/after state is not obvious without motion.

Not for pages where split motion would hide the CTA or interrupt reading.

Not for dense grids, forms, or pages where geometric motion would slow comprehension.

Not for grids where movement changes perceived grouping or reading order.

Not for dense galleries, ecommerce catalogues, pricing sections, documentation, comparison tables, forms, or content users need to scan quickly.

Not for weak image sets. Stack Spread can arrange strong visuals beautifully, but it cannot create taste from random assets.

Not for sections where the central message is long. The headline needs space, not a swarm of cards fighting for attention.

Not for comparison grids, forms, or pages where accumulated cards would obscure the next action.

Not for card groups where hidden depth would make keyboard focus or link order confusing.

Not for sections where every item has equal weight or users need to jump straight to a specific answer.

Not for mobile layouts unless the pinned idea becomes a clean vertical sequence.

Not for long text, accessibility-critical messages, or sections where motion makes reading harder.

Not for keyword-critical headings or important sentences that need stable layout.

Not for essential diagrams, legal copy, or hero content that must be readable before animation completes.

Not for assets that carry essential meaning before the reveal has finished.

Not for body copy, instructions, or claims that must be clear before the animation resolves.

Not for phrases that need to be understood instantly above the fold.

Not for hiding essential policy, pricing, support, or legal details that users must see without opening an accordion.

Not for flows where animation delays typing, validation, error discovery, payment, or submit feedback.

Not for long pages, dense forms, core pricing details, or content that would work better as an inline section or drawer.

Not for content that must be compared side by side, discovered through search snippets, or read in one continuous flow.

Not for dense card grids, long reading sections, dashboards, tables, destructive actions, or any UI where every container competes for attention.

Not for forms where the animated border distracts from labels, errors, validation, or submit state.

Not for pricing, comparison, or dense reading sections where cards need to stay perfectly still for scanning.

Not for mandatory proof, compliance logos, or content users must read in sequence.

Not for logo strips where motion prevents recognition, trust, or partner scanning.

Not for hiding essential information users must see before acting.

Not for long documentation, legal clauses, dense tables, product specs, or content that needs side-by-side comparison.

Not for pages where every section becomes an accordion because the layout has not made a decision. Collapsing everything is not information architecture. It is avoidance with rounded corners.

Not for pages where geography is not meaningful.

Not for fake global presence. If the business only operates in one region, use a local map, market section, or customer story instead of pretending the world needs to rotate.

Not for dense operational dashboards, legal coverage lists, compliance matrices, or anything users need to scan with precision. Use tables when exact regional rules matter.

Not for financial, compliance, analytics, or dashboard numbers where exact reading speed matters more than expressive motion.

Not for dense ecommerce grids, pricing sections, documentation, long text cards, legal content, or interfaces where users need instant comparison across many items.

Not for unstable layouts where images, captions, or containers constantly change size. FLIP rewards discipline. It punishes chaos with visible weirdness.

Not for content where a simple grid would be faster, clearer, and more useful.

Not for mobile-first sections, dense comparison cards, or content where hover depth hides information users need to compare.

Not for ecommerce catalogues, pricing pages, comparison grids, documentation, or routes where users need fast scanning.

Not for image sets where every item must be visible at once before the visitor can make a decision.

Not for critical forms, checkout flows, legal content, dense documentation, long articles, or content that deserves its own permanent URL.

Not for hiding essential information that should be visible on the card itself. The drawer should deepen the item, not rescue an underwritten grid.

Not for mobile layouts where the drawer becomes cramped unless a full-screen or bottom-sheet adaptation is provided.

Not for lists where every preview contains mandatory content that is inaccessible without pointer movement.

Liquid Shatter is not a suitable replacement for ordinary navigation, content transitions, product cards, or functional loading indicators.

Avoid using it in checkout flows, dense dashboards, documentation, pricing pages, and interfaces where visitors need to complete tasks quickly. The sustained interaction and visually complex rendering would introduce unnecessary friction.

It is also a poor fit for pages already carrying several demanding WebGL scenes, full-screen video backgrounds, or continuous particle systems without a defined performance budget.

The central question is whether users gain anything from controlling the visual transformation. If the answer is simply that it looks impressive, a lighter animation may be the better production decision.

Not for page transitions, route changes, checkout flows, dashboards, dense documentation, or large tab systems with many panels.

Not for critical information that users must see without clicking.

Not for content where hover is the only trigger. The selected view must be available through click, keyboard, and touch.

Not for the one testimonial that closes the sale, long proof stories, or evidence users must compare before converting.

Not for dense release notes, legal timelines, documentation tables, long biographies, pricing explanations, or content that needs direct comparison.

Not for weak chronology. If the dates do not tell a meaningful story, a timeline will only make the emptiness more organized.

Not for pages where users need all information immediately visible. Use a table or structured list when scanning matters more than narrative.

Not for videos that need native reliability more than branded chrome, or for pages where captions, controls, or fallback playback cannot be verified.

Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job.

Not for complex enterprise navigation with deep nesting, admin dashboards, ecommerce mega menus, dense documentation sidebars, or workflows where users need instant utilitarian navigation.

Not for menus with unclear route labels. Motion can make navigation memorable, but it cannot make vague labels useful.

Not for pages where the preview image becomes louder than the route structure. Navigation is not a moodboard with escape-key support.

Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job.

Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job.

Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job.

Not for complex enterprise navigation, large ecommerce menus, admin dashboards, documentation systems with many nested sections, or product areas that need persistent sidebar navigation.

Not for hiding essential routes behind unclear controls. A dock can be compact, but it cannot be cryptic.

Not for pages where navigation speed matters more than ceremony. If the user knows exactly where they want to go, the menu should not make them sit through a tiny architectural transformation first.

Not for dense enterprise dashboards, admin tools, checkout flows, documentation-heavy products, or pages where users need fast utility navigation above all else.

Not for menus with weak structure. A perspective transition can make navigation feel premium, but it cannot fix unclear information architecture.

Not for mobile unless the menu simplifies cleanly. A desktop 3D shift forced onto a small screen can quickly become a tiny tilted website pretending to be useful.

Not for complex apps, dashboards, dense product navigation, large documentation sites, or menus with many nested levels.

Not for sites where all primary actions need to remain visible at all times.

Not for dense enterprise navigation with many nested levels, complex permissions, admin dashboards, documentation sidebars, ecommerce mega menus, or workflows where speed matters more than ceremony.

Not for hiding routes behind unclear icons or experimental triggers. A menu can unfold beautifully and still fail if users do not know it is a menu.

Not for pages where the animation delays basic navigation. Getting to another page should not feel like waiting for a stage curtain to remember its cue.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for product flows, forms, dashboards, checkout, mobile-first pages, or any screen where pointer movement would distract from task completion.

Not for long pages where the effect follows the visitor forever.

Not for dense dashboards, checkout flows, forms, documentation, legal pages, pricing tables, or sections where users need quiet utility.

Not for mobile-first experiences that cannot use pointer proximity meaningfully.

Not for pages already overloaded with particles, shaders, video backgrounds, and scroll effects. A cursor trail should add signal, not join the motion committee and start voting against readability.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, editors, documentation, or mobile-first routes where native cursor and text selection matter more.

Not for pages where the crosshair sits above links, inputs, modals, or focus states.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Not for apps, docs, checkout, search, dashboards, dense product flows, or pages where users need instant repeated navigation.

Not for brands where the aperture metaphor feels decorative rather than connected to the content.

Not for long documentation, dashboards, checkout flows, product apps, or any route where users navigate frequently and expect instant response.

Not for pages where upward motion would be confused with normal scrolling.

Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion.

Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion.

Not for dashboards, docs, checkout, search, pricing comparison flows, or routes where navigation speed is the feature.

Not for pages where perspective movement would make users lose their place.

Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion.

Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion.

Not for apps, docs, checkout, search, dashboards, or flows where fast navigation is the main feature.

Not for routes where users bounce between pages repeatedly and would see the same slice too often.

Not for apps, docs, checkout, search, dashboards, or product flows where navigation speed is the feature.

Not for routes where visitors navigate repeatedly and would resent the same flourish every few seconds.

Not for dashboards, docs, checkout, search, forms, or product flows where fast repeated navigation matters more than motion.

Not for routes where users bounce between pages frequently and would see the same sweep too often.

Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.

Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.

Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.

Not for large portfolio archives where visitors need to compare many projects or open work from a simple grid.

Not for low-power-first audiences unless a static project grid is the primary fallback.

Not for documentation, pricing, forms, dashboards, long text, or anything that needs fast scanning.

Not for mobile-first pages unless the book collapses into a clear stacked or swipeable version.

Not for product flows, forms, documentation, checkout, or pages where users need quiet reading and precise clicking.

Not for large model sets without a strict physics and rendering budget.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for text-heavy pages, dashboards, checkout flows, dense product sections, or mobile-first routes where the particle scene becomes the page’s heaviest asset.

Not for brands that need calm clarity more than a sculptural first impression.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for security claims that the product cannot prove, or for pages where animation substitutes for clear privacy, compliance, or encryption copy.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for essential information that mobile, keyboard, or no-hover users cannot reach.

Not for long reading pages, dashboards, forms, checkout, low-contrast layouts, or sites already carrying heavy video and WebGL.

Not for pages where the glitter competes with the headline or makes buttons harder to find.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Not for first-screen messaging, product comparison, or mobile flows that need immediate vertical scanning.

Not for above-the-fold sections where it delays the first message.