THE WEBSITE EFFECTS LIBRARY / BY CMC ORGANIC
Explore 136 live website effects through cannabis supplier examples: seed brands, vape hardware, grow lighting, nutrients, soil, packaging and equipment. Try the features, save your favorites and build a brief for your brand.
01 /Hover, tap, drag or scroll inside each demo.
02 /Learn the name and where it works.
03 /Save your favorites. Make them your starting point.
136 of 136 live demos
Cannabis cultivation supply catalog
A wide navigation panel that groups links into clear columns. It helps visitors scan a large catalog without opening several separate menus.
Useful forStores with several product families or services.
Plan it wellKeep the groups focused; a large menu still needs a clear hierarchy.
Also calleddropdown navigation / large menu
Nutrients, soil & grow lights
A menu that changes its featured image as you explore categories. The picture makes unfamiliar collections easier to recognize before you click.
Useful forProduct collections, portfolios and hospitality sites.
Plan it wellEvery category needs a tap-friendly route as well as a hover preview.
Also calledvisual menu / hover image navigation
Cannabis supplier navigation
Navigation takes over the screen, giving a short list of destinations room to breathe. Large type and a clear close control make the transition feel deliberate.
Useful forStudios, portfolios and brands with a small main navigation.
Plan it wellKeep the close control obvious and restore focus when the menu closes.
Also calledoverlay menu / takeover navigation
Mobile cultivation supply store
A navigation panel slides in from one side while part of the page remains visible. It is a familiar way to organize mobile navigation without crowding the header.
Useful forMobile storefronts and service websites.
Plan it wellA production drawer should manage keyboard focus and prevent background scrolling.
Also calledoff-canvas menu / slide-out navigation
Search a cannabis supply catalog
A compact search-first menu finds pages as you type. It suits visitors who know what they need and want a direct path through a larger site.
Useful forResource hubs, customer portals and complex websites.
Plan it wellKeep conventional navigation available for people who prefer browsing.
Also calledcommand search / quick navigation
Nutrient product information
Nutrient concentrate in a sample 1 L bottle. View packaging and wholesale options.
Related panels share one space, with labels that let visitors choose which one to read. Tabs make a small set of parallel topics easy to compare.
Useful forProduct information, service packages and feature explanations.
Plan it wellUse meaningful labels and keep important content available in the page markup.
Also calledtab navigation / content tabs
Cultivation supply departments
Nutrients / Soil & coco / LED grow lights
Product specifications / Safety data / Wholesale terms
Bulk quotes / Packaging inquiries / Order support
Groups open one at a time to reveal their child links. It keeps a deeper site structure compact, especially on a narrow screen.
Useful forMobile category trees and help centers.
Plan it wellUse clear expanded states and avoid hiding essential destinations too deeply.
Also calledexpandable menu / collapsible navigation
Cannabis packaging product story
Explore the sample cannabis packaging range.
Explore the sample cannabis packaging range.
Explore the sample cannabis packaging range.
A small navigation bar stays available while a long page moves beneath it. The active label follows the section you are reading.
Useful forLong service pages, guides and product landing pages.
Plan it wellAllow room for the fixed header so anchor links do not hide headings.
Also calledanchor navigation / scrollspy / jump links
Cultivation equipment showroom
Foreground and background layers move at different speeds, creating depth as you scroll. The example keeps the motion inside its frame so you can compare the layers.
Useful forEditorial hero sections and visual brand stories.
Plan it wellKeep motion subtle and offer a reduced-motion experience.
Also calleddepth scrolling / layered scroll
Grow-light product launch
Content moves into view as it enters the visible area. It gives long pages a sense of pacing while keeping each section easy to follow.
Useful forService stories, case studies and landing pages.
Plan it wellEssential text should remain visible if scripts or animations are unavailable.
Also calledfade on scroll / reveal animation
Cannabis supplier product range
A group of items appears in a short sequence rather than all at once. The slight delay gives the eye a path through a collection.
Useful forFeature lists, team sections and selected work.
Plan it wellKeep the full sequence short; visitors should not have to wait to read.
Also calledcascading animation / sequential reveal
Packaging manufacturer overview
A cannabis packaging manufacturer overview.
A cannabis packaging manufacturer overview.
A cannabis packaging manufacturer overview.
A thin indicator fills as you move through content. It helps people judge their progress through a long page without competing with the text.
Useful forArticles, guides and detailed service pages.
Plan it wellCalculate progress from the actual reading area, not unrelated footer content.
Also calledscroll progress / reading indicator
Nutrient bottle packaging
Explore a nutrient supplier product story.
Explore a nutrient supplier product story.
Explore a nutrient supplier product story.
One visual remains pinned while related chapters pass beside it. Each chapter updates the visual, connecting an explanation to what the reader sees.
Useful forProduct education, processes and before-and-after stories.
Plan it wellOn small screens, a simple stacked layout can be easier to use.
Also calledpinned sections / scrollytelling
Soil, nutrients & lighting
Vertical scrolling advances a horizontal set of scenes. It is a way to present a sequence with a different rhythm while keeping the familiar scroll gesture.
Useful forA short project sequence or a visual product story.
Plan it wellAvoid trapping the page; provide clear progress and a normal way out.
Also calledsideways scrolling / pinned horizontal section
Cultivation supply collections
The gallery settles neatly on the nearest slide when you finish scrolling. Each item gets a clear resting position instead of stopping halfway between cards.
Useful forTestimonials, product benefits and mobile galleries.
Plan it wellLet visitors control the movement and keep the next item discoverable.
Also calledsnap scrolling / swipe gallery
LED grow-light detail
An image or composition changes scale in response to scroll position. The movement follows your input rather than running as a prerecorded animation.
Useful forA single hero moment or an editorial transition.
Plan it wellAvoid dramatic zooms and preserve an accessible static version.
Also calledzoom on scroll / scale reveal
Cannabis packaging label
The card tilts toward the pointer, giving a flat interface a sense of depth. A touch drag offers a similar interaction without requiring a mouse.
Useful forSelected projects and featured products.
Plan it wellKeep text readable and never make essential information depend on the tilt.
Also calledperspective hover / 3D hover effect
LED grow-light showcase
Explore the fixture.
A soft pool of light follows your pointer across a dark surface. It adds emphasis to the area you explore while the content stays in place.
Useful forDark portfolio cards and feature highlights.
Plan it wellUse enough contrast that the content works even when the spotlight is absent.
Also calledmouse spotlight / radial hover glow
Request a wholesale supply quote
A button shifts slightly toward the pointer, then returns to its starting position. Small movements can make an important call to action feel more tactile.
Useful forA primary project or booking call to action.
Plan it wellKeep the clickable area steady and the movement modest.
Also calledmagnetic cursor / attraction button
Cannabis packaging portfolio
A small label follows the pointer over an interactive area and explains the action. Touch visitors receive a visible button instead of relying on a custom cursor.
Useful forPortfolio previews and interactive galleries.
Plan it wellA cursor label supplements a real link; it should never replace one.
Also calledcursor follower / view-project cursor
Nutrient bottle front & back
A second visual layer appears when a visitor explores a card. This gives a project or product another angle without leaving the current page.
Useful forProduct cards and portfolio selections.
Plan it wellUse touch and keyboard alternatives and avoid loading every large image at once.
Also calledhover image swap / rollover image
Nutrient product label
A card rotates to reveal information on its reverse side. It works best when the back adds a short detail rather than hiding the main message.
Useful forTeam introductions and concise feature explanations.
Plan it wellKeep the front meaningful and provide an explicit flip control.
Also calledtwo-sided card / card rotation
Cannabis supply departments
The active panel grows while its neighbors make room. A short label and a focused visual create a compact, exploratory gallery.
Useful forA small set of services, destinations or project types.
Plan it wellSupport click and focus so the effect works without hovering.
Also calledhover accordion / expanding gallery
Featured cannabis supply range
A colored highlight travels around the edge of a card. The motion emphasizes the boundary without making the content itself move.
Useful forFeatured plans, selected cards and important announcements.
Plan it wellReserve continuous motion for a few elements and respect reduced-motion settings.
Also calledgradient border / glowing border
Cultivation supply homepage
Cards of different sizes form one organized composition. Larger tiles establish the priority while smaller tiles support the main story.
Useful forHomepages, capability overviews and dashboards.
Plan it wellMake the reading order sensible when the layout collapses to one column.
Also calledmodular grid / asymmetric card grid
Cannabis supplier product gallery
Images or cards of different heights fit into columns without forcing identical crops. The result suits a visual collection with varied proportions.
Useful forPhotography, inspiration collections and editorial work.
Plan it wellPreserve a predictable reading and keyboard order.
Also calledPinterest layout / staggered image grid
Retail & wholesale supply buyers
Two contrasting panels share the viewport. Their balance can emphasize a choice, a comparison or the relationship between words and imagery.
Useful forTwo service paths or an image-led introduction.
Plan it wellStack the panels on mobile and keep the main action unmistakable.
Also calleddual-panel layout / split hero
Supplier ordering services
A compact card grows to reveal more detail in the same area. Visitors can explore the information they need while keeping the collection in context.
Useful forService details and resource libraries.
Plan it wellReserve space thoughtfully so expanding a card does not cause confusing jumps.
Also calledprogressive disclosure / expanding tile
Nutrient & lighting collections
Category controls narrow a collection instantly. A visitor can focus on a type of project, product or resource without scanning the entire set.
Useful forPortfolios, collections and large resource hubs.
Plan it wellShow the result count and a useful empty state.
Also calledcategory filtering / portfolio filters
Cultivation supply catalog
Visitors switch between visual browsing and a more compact list. Both views present the same content with different priorities.
Useful forProduct catalogs and resource directories.
Plan it wellKeep sorting, filters and selections when the layout changes.
Also calledlayout switcher / list view
Wholesale order priorities
Items can change order through direct controls. A production version can also support dragging, with buttons as the keyboard-friendly alternative.
Useful forPlanning tools, wishlists and content dashboards.
Plan it wellAlways offer controls that do not depend on drag gestures.
Also calledsortable list / drag-and-drop ordering
Cannabis supplier customer portal
Visitors choose a light or dark presentation. The layout stays consistent while surfaces, borders and text colors adapt as a complete system.
Useful forTools, dashboards and reading-focused websites.
Plan it wellCheck contrast in both modes and remember the visitor’s preference when appropriate.
Also calledcolor mode / theme switch
Cannabis packaging redesign
Two versions of the same composition share a frame. Moving the divider exposes more of either version, making visual changes easy to compare.
Useful forRedesigns, photo retouching and transformations.
Plan it wellUse matching image positions and label both sides clearly.
Also calledimage comparison / comparison slider
Nutrient label detail
A zoomed view follows the point you explore. It helps visitors inspect texture or detail without navigating away from the page.
Useful forDetailed product photography and visual portfolios.
Plan it wellProvide a tap-to-zoom or full-image option on touch devices.
Also calledproduct zoom / image zoom lens
Cannabis packaging detail viewer
A focused overlay enlarges an image above the current page. Closing it returns the visitor to the same place in the gallery.
Useful forPhotography, case-study screenshots and product details.
Plan it wellProvide keyboard dismissal, a visible close control and useful image descriptions.
Also calledimage modal / fullscreen gallery
Cultivation product photo gallery
A row of thumbnails controls one larger viewing area. The physical-film styling turns familiar gallery navigation into a recognizable part of the brand.
Useful forPhotography and videography portfolios.
Plan it wellKeep the selected frame obvious and the strip easy to scroll on mobile.
Also calledthumbnail rail / contact sheet
Nutrients, soil & lighting showcase
A visitor moves through a set of slides using explicit controls. A manual carousel gives the content a sequence without moving it before someone is ready.
Useful forShort testimonials, benefits and featured collections.
Plan it wellAvoid hiding essential content in an endless autoplay sequence.
Also calledslider / slideshow
Vape hardware / product rotation
A product-like object rotates as you move a control. Real product spins use a matching image sequence or a 3D asset prepared for the item.
Useful forPackaging, hardware and products with useful details on every side.
Plan it wellPlan the photography or model assets; a polished spin needs consistent source material.
Also called360 product view / 3D product spin
Cannabis packaging reveal
A changing mask exposes a visual beneath it. The reveal can be tied to a slider, hover or scroll to make a transition feel connected to the visitor’s action.
Useful forHero transitions and visual comparisons.
Plan it wellKeep the reveal short and preserve the meaning of the image without animation.
Also calledclip-path reveal / masked image transition
Grow-light product presentation
The area around the main visual darkens so attention stays on the work. The visitor can restore the page whenever they want.
Useful forVideo portfolios and immersive visual presentations.
Plan it wellKeep playback and exit controls accessible while the surroundings are dimmed.
Also calledtheater mode / focus mode
Nutrient concentrate quick view
1 L bottle. Sample nutrient product.
Sample interface. No purchase.
A focused panel shows product details without leaving a collection. Visitors can inspect an item, choose an option and return to browsing.
Useful forProduct collections with several comparable items.
Plan it wellKeep a full product-page route for detailed content and shareable links.
Also calledquick shop / product modal
Cultivation supply basket
Nutrient concentrate ×
$24Interface demo. No checkout.
A side panel shows the basket immediately after an item is added. It confirms the action while letting visitors keep their place in the store.
Useful forEcommerce storefronts.
Plan it wellReal totals, discounts and stock must come from the commerce platform.
Also calledmini cart / cart sidebar
Cannabis packaging colors
Visual options change a product’s presentation and selected label. Color or material swatches help visitors understand a choice more quickly than a text dropdown.
Useful forProducts with meaningful visual variants.
Plan it wellName every swatch and never rely on color alone to communicate the selection.
Also calledcolor selector / material swatches
Cultivation supply sample kit
Sample total
Visitors choose complementary items and see the selection total update. It helps explain how several products work together as a set.
Useful forKits, supplies and coordinated product ranges.
Plan it wellPricing, inventory and discount rules need to be connected to the actual store.
Also calledbuild-a-kit / mix-and-match bundle
Nutrient bottle packaging options
Sample price
Several choices update one preview and its price. The interaction translates a set of options into a clearer picture of what someone is selecting.
Useful forCustom packaging and configurable products.
Plan it wellDefine valid combinations and production constraints before building the interface.
Also calledcustom product builder / option visualizer
Cannabis supply price filter
5 sample items
A price control narrows visible products and updates the count. It makes a larger catalog easier to browse within a budget.
Useful forCollections with a broad price range.
Plan it wellKeep the value readable and provide an accessible control for exact adjustments.
Also calledrange slider / faceted filter
Nutrient product purchase bar
Sample 1 L bottle for a cannabis cultivation supply catalog.
A compact purchase bar stays available while a visitor reads longer product information. The item and action remain connected as the page moves.
Useful forDetailed product pages.
Plan it wellAvoid covering content or competing with mobile chat and consent controls.
Also calledfloating buy bar / sticky purchase button
Wholesale nutrient quantity
Sample total
Plus and minus buttons update the quantity and line total. Clear limits and a readable value reduce uncertainty before adding an item.
Useful forProduct pages, carts and supply ordering.
Plan it wellRespect minimums, stock limits and pack sizes from the actual catalog.
Also calledquantity selector / number stepper
Cannabis supplier onboarding
This is a local form demo. Nothing is sent.
A longer form is divided into focused stages. A visible progress indicator helps people understand how much is left without seeing every question at once.
Useful forProject inquiries and onboarding.
Plan it wellAllow visitors to go back without losing their answers.
Also calledform wizard / step-by-step form
Wholesale buyer contact form
Try a buyer email. Nothing is sent.
Feedback appears next to the field that needs attention. Clear, specific guidance makes it easier to fix a mistake before submitting.
Useful forContact, signup and checkout forms.
Plan it wellDo not mark fields wrong before a visitor has had a chance to finish typing.
Also calledinline validation / field error states
Cannabis supply quote request
Relevant questions appear in response to an earlier choice. A visitor sees the details that apply to their project instead of working through every possible field.
Useful forService inquiries and complex requests.
Plan it wellKeep hidden fields out of required validation and explain why a question is needed.
Also calledsmart form / branching questions
Custom cannabis packaging inquiry
Demo only. Nothing is sent.
A small inquiry form opens beside the content that prompted the question. Visitors can start a conversation while the service remains in context.
Useful forService pages and high-consideration products.
Plan it wellUse a short form and provide a full contact-page alternative.
Also calledslide-out contact form / inquiry panel
Supplier product consultation
Book a supplier consultation
Sample availability. No appointment is booked.
Available-looking time slots respond to selection and show a confirmation state. A real booking flow connects this interface to availability and calendar rules.
Useful forConsultations and service appointments.
Plan it wellThe demo uses sample slots; real availability must be checked before confirmation.
Also calledappointment picker / time-slot selector
Cannabis packaging artwork intake
The filename stays in your browser. No upload.
A selected filename appears immediately so a visitor can check what they chose. This demo only shows the name locally and does not upload the file.
Useful forProject briefs and creative intake forms.
Plan it wellA real upload requires file-size limits, accepted formats and secure storage.
Also calledupload field / attachment preview
Cannabis supply product search
A short list of matching suggestions appears as you type. It helps people find the right term even when they do not know the exact phrase.
Useful forCatalog search, glossaries and resource hubs.
Plan it wellSupport keyboard selection and make it clear what will happen when a result is chosen.
Also calledautocomplete / typeahead search
Saved grow-light shortlist
A brief status message confirms an action without taking over the page. An undo control can make a reversible action feel more forgiving.
Useful forSaved items, copied links and small updates.
Plan it wellAnnounce the status to assistive technology and keep important messages available long enough.
Also calledsnackbar / success notification
Cannabis packaging cost estimate
Estimated total
Inputs and results share the same space, with the answer updating immediately. It can turn a useful business calculation into a reason to visit and return.
Useful forProduct sizing, planning and educational tools.
Plan it wellState the assumptions and distinguish an estimate from a confirmed quote.
Also calledinteractive calculator / instant estimate
Supplier website project priorities
Several values change the shape of a radial graph. It makes a profile or set of tradeoffs visible while the visitor adjusts the underlying inputs.
Useful forFlavor profiles, comparisons and educational tools.
Plan it wellPair the visual with readable values so the data is not available only as a shape.
Also calledspider chart / profile graph
Cannabis supply category demand
The chart changes as its inputs change, connecting each number to a visual comparison. The example uses sample data rather than business results.
Useful forDashboards, explainers and scenario planning.
Plan it wellLabel units and keep scales consistent so the visual does not exaggerate differences.
Also calledinteractive chart / data visualization
Supplier catalog support plan
Supplier catalog support plan. Billed $20 monthly.
A control changes the displayed billing period and explains the difference. It lets visitors compare two ways of paying without leaving the pricing section.
Useful forSubscriptions and recurring service plans.
Plan it wellShow billing terms clearly and avoid confusing monthly equivalents with the actual charge.
Also calledpricing toggle / billing switch
Cultivation supplier service plans
Selected priorities highlight relevant rows in a comparison. It helps visitors connect a package or option to the features they actually need.
Useful forService plans and product comparisons.
Plan it wellKeep descriptions factual and make the recommended option explainable.
Also calledcomparison table / plan selector
Cannabis supply department finder
Which supply department do you need?
Choose a department to explore the sample catalog.
A short sequence of choices leads to a relevant suggestion. It offers a route into a larger catalog for visitors who are unsure where to begin.
Useful forService discovery and product education.
Plan it wellExplain why an option was suggested and leave room to browse other choices.
Also calledproduct finder / interactive recommender
Wholesale supply order checklist
Completed tasks update a visible progress indicator. It turns a longer process into a small set of clear next steps.
Useful forCustomer onboarding, project planning and learning tools.
Plan it wellPersist real progress appropriately and make every task’s status readable.
Also calledonboarding checklist / completion tracker
Cannabis packaging components
Explore the sample packaging components.
Clicking a point reveals information tied to a specific part of a visual. It connects explanation to position without covering the entire image in labels.
Useful forProduct anatomy, packaging and location stories.
Plan it wellProvide a text-based route to the same details for keyboard and screen-reader users.
Also calledannotated image / clickable diagram
Cannabis supplier campaign headline
Letters cycle through a short sequence before resolving into a readable headline. It gives a key message a technical, energetic entrance without changing the final wording.
Useful forA brief introduction or a product launch headline.
Plan it wellKeep the final text available and let visitors replay the effect instead of running it constantly.
Also calleddecoding text / scramble animation / hacker text
Cultivation equipment brand story
A sentence appears one word at a time with a small upward movement. The sequence creates emphasis while preserving a natural reading order.
Useful forShort brand statements and section introductions.
Plan it wellUse a brief sequence and show all words immediately for reduced motion.
Also calledsplit text / staggered typography / word animation
Cannabis supplier introduction
A line of text builds character by character, as though someone is writing it. A visible replay control gives the visitor ownership of the moment.
Useful forA short introductory sentence or an interactive prompt.
Plan it wellLong passages should remain static so visitors never have to wait to read them.
Also calledtyping animation / typed text
Vape hardware / animated gradient text
A band of color travels through the letterforms while the text stays still. It adds motion to a headline without moving its position on the page.
Useful forA short headline or a highlighted phrase.
Plan it wellCheck contrast at every point in the gradient and keep motion optional.
Also calledmoving text gradient / shimmer headline
Cannabis supplier category ticker
A repeating strip moves horizontally through a clipped frame. Visitors can pause it to inspect the content or restart the movement.
Useful forBrand values, partner logos or a compact visual ribbon.
Plan it wellProvide a pause control and avoid using moving text for essential instructions.
Also calledinfinite ticker / scrolling text / logo marquee
Request cannabis supply pricing
A soft circle expands from the point where the button is pressed. The feedback connects the interaction to the visitor’s exact click or tap.
Useful forButtons and compact actions throughout an interface.
Plan it wellThe ripple supplements a clear button state and should stay inside the control.
Also calledmaterial ripple / press feedback
Cannabis manufacturer collection links
A line grows beneath a link as you explore it. The small transition makes navigation feel responsive while the words stay in place.
Useful forNavigation links, service lists and editorial calls to action.
Plan it wellKeep links recognizable before the animation begins.
Also calledlink underline reveal / hover underline
Vape hardware / glitch text reveal
Brief offset layers shift around a headline and then settle back into place. A single controlled burst adds an experimental edge to a short message.
Useful forCreative studio headlines and launch moments.
Plan it wellAvoid flashing and use a static state for visitors who prefer reduced motion.
Also calledRGB split text / digital distortion
Vape hardware / liquid morphing shape
A soft shape changes its outline and position as you move around it. The surface feels fluid even though the example uses lightweight styling.
Useful forBrand introductions and small interactive accents.
Plan it wellUse the shape as decoration and keep important text separate from the moving surface.
Also calledliquid blob / organic morph / fluid hover
Cannabis packaging order stages
Cards stay in place as later cards move over them, building a layered sequence. Each step holds attention before the next one takes over.
Useful forA short process, product family or case-study sequence.
Plan it wellKeep a sensible reading order and enough space for each card’s content.
Also calledsticky card stack / stacked scroll cards
Cultivation supply brand badge
A graphic rotates in response to how far you scroll. The movement follows the visitor instead of playing on its own.
Useful forProduct details, seals and editorial transitions.
Plan it wellUse restrained rotation and offer a static alternative for reduced motion.
Also calledrotating on scroll / scroll transform
Cannabis supplier collection reveal
Two foreground panels move apart as the visitor scrolls, revealing content underneath. The transition turns a change of section into a visual opening.
Useful forA product reveal or a focused storytelling transition.
Plan it wellKeep the reveal short and avoid concealing essential information indefinitely.
Also calledcurtain reveal / split curtain / opening panels
Cannabis packaging visual trail
Small visual stamps appear along the path of the pointer and fade away. The trail makes a small area feel exploratory without replacing normal navigation.
Useful forCreative portfolios and playful brand introductions.
Plan it wellKeep the number of stamps small, support touch and disable motion when requested.
Also calledmouse image trail / cursor stamps
Grow-light housing assembly
A control moves through a prepared sequence of visual states. The visitor chooses the pace and can stop at any point to inspect a detail.
Useful forProduct assembly, packaging details and process explanations.
Plan it wellA production sequence needs consistent source images; this demo uses a stylized sample.
Also calledimage sequence scrubbing / frame-by-frame viewer
Cultivation supply product gallery
Visitors grab a gallery and move it horizontally to browse the items. Arrow controls provide the same route for keyboard and touch users.
Useful forProduct families and visual collections.
Plan it wellDo not make dragging the only way to navigate the gallery.
Also calleddraggable carousel / grab-to-scroll gallery
Seeds & genetics / interactive card fan
A compact stack opens into a fan of cards, then closes again. It creates a memorable entrance to a small visual collection.
Useful forA few featured products or selected projects.
Plan it wellKeep labels readable when the cards open and provide a clear toggle.
Also calledfanned cards / spread gallery
Wholesale cultivation supplies
Sample total
Several product quantities can be entered in one table, with line totals and an order total updating together. It suits buyers who already know the items they need.
Useful forSupply catalogs, repeat wholesale orders and replenishment.
Plan it wellConnect real orders to current stock, pack sizes and account pricing.
Also calledquick order form / multi-SKU ordering
Cannabis packaging volume pricing
Sample total
The per-unit price changes when the sample quantity reaches a new tier. The active tier and total remain visible so the volume offer is easy to understand.
Useful forCase quantities, packaging supplies and bulk consumables.
Plan it wellDisplay the unit basis clearly and calculate actual prices from the store rules.
Also calledvolume pricing / quantity discounts / tiered pricing
LED grow-light specifications
Selecting products places their specifications side by side. Buyers can compare the details that matter without opening several separate pages.
Useful forGrow lights, controllers and cultivation equipment.
Plan it wellKeep specifications accurate, use consistent units and explain any test conditions.
Also calledtechnical comparison / compare products / spec table
Cultivation irrigation fittings
The visible sample accessories change to match the selected connection size. A compatibility filter reduces guesswork in a technical catalog.
Useful forIrrigation parts, ducting and equipment accessories.
Plan it wellBase compatibility on verified product data and make the matching rule visible.
Also calledfit finder / compatible accessories / equipment matcher
Grow-tent dimensions
Measurements shown in centimeters.
Dimensions change between metric and imperial units while describing the same sample item. It helps a catalog communicate with buyers in different markets.
Useful forEquipment, grow tents, packaging and international supplier catalogs.
Plan it wellKeep the original measurements precise and make rounding clear.
Also calledmetric imperial switch / measurement converter
Cultivation equipment display layout
A sample grid changes as visitors adjust its dimensions, turning a numeric layout into a visual plan. The example counts positions rather than recommending grow-light coverage.
Useful forPlanning equipment arrangements and explaining modular systems.
Plan it wellActual lighting and cultivation plans need product specifications and project requirements.
Also calledlayout visualizer / grid planner / room planner
Cannabis supplier technical documents
Preview of a resource viewer. A production library would open the manufacturer’s current document.
Document categories narrow a resource library and a viewer opens the chosen item. Buyers can find the supporting information near the products they are considering.
Useful forTechnical manuals, specification sheets and safety data sheets.
Plan it wellKeep versions current, label file types and provide accessible downloads in production.
Also calledresource library / manual finder / document portal
Grow-room equipment quote
Sample inquiry only. No request is sent.
Buyers select sample equipment and quantities to create a structured inquiry. The summary stays connected to the chosen items so a sales conversation starts with clear context.
Useful forEquipment packages, manufacturer sales and larger supplier orders.
Plan it wellThe example is an inquiry preview; real quotes require verified pricing, availability and terms.
Also calledrequest a quote builder / RFQ tool / quote basket
Cultivation lighting catalog
Hangers / Controllers / Accessories
A visitor moves through nested product groups while a breadcrumb trail preserves the route back. It makes a deep supplier catalog easier to understand without showing every branch at once.
Useful forNutrient, lighting and equipment catalogs with several levels.
Plan it wellUse real page links in production so every category has a shareable destination.
Also calledbreadcrumb navigation / drilldown menu / category hierarchy
Grow-light product actions
Choose a sample grow-light action.
Shortcuts spread around a central control, creating a compact wheel of actions. The visual arrangement is useful when a small set of equally important tools belongs to one object.
Useful forCreative tools, product viewers and compact utility panels.
Plan it wellKeep labels readable and provide a conventional alternative when there are many actions.
Also calledcircular menu / pie menu / action wheel
Cannabis supplier account navigation
Cannabis supplier account
A compact navigation bar floats near the bottom of its frame. The selected destination updates both the active state and the content above it.
Useful forMobile catalogs and customer resource areas.
Plan it wellAccount for safe areas and avoid overlapping checkout, chat or consent controls.
Also calledbottom navigation / floating dock / mobile dock
Nutrient supply order journey
A line draws progressively as the visitor moves through a story. The effect can connect stages of a process to a visible route without requiring a video.
Useful forManufacturing stories, project processes and delivery explanations.
Plan it wellKeep all stage information readable without motion and use a short, purposeful path.
Also calledSVG path animation / line drawing on scroll / scroll stroke
Cannabis packaging color story
The background shifts between colors as the reading position changes. A continuous color transition can signal a new chapter while preserving the page structure.
Useful forBrand stories and editorial landing pages.
Plan it wellCheck text contrast throughout the transition, not only at the endpoints.
Also calledbackground color on scroll / color interpolation
LED grow-light focus reveal
A decorative composition sharpens as it approaches the focal point in its frame. The title stays readable while blur and depth affect only the artwork.
Useful forProduct introductions and atmospheric portfolio sections.
Plan it wellAvoid blurring essential information or delaying the appearance of your main content.
Also calledblur on scroll / depth of field / focus reveal
Seeds & genetics / interactive foil sheen
A narrow band of reflected light follows the pointer across a surface. The highlight suggests foil, gloss or a polished finish using lightweight layered gradients.
Useful forPremium packaging and featured product cards.
Plan it wellThe effect illustrates a finish; use real photography when buyers need to evaluate materials.
Also calledholographic card / specular highlight / foil hover
Wholesale cannabis supply CTA
Tap a different point to move the origin.
A circular color fill expands from the exact point where the button is activated. The response ties the visual feedback to the visitor's gesture.
Useful forCalls to action and interactive controls.
Plan it wellKeep focus styling and readable labels independent of the animated fill.
Also calleddirectional hover fill / origin reveal / button wipe
Grow-light manufacturer resources
LED fixture dimensions, wattage and connections.
Grow-light mounting hardware and included parts.
Fixture warranty terms and manufacturer support.
A compact list controls a larger detail panel beside it. Visitors can compare several records while keeping their place in the collection.
Useful forProduct documentation and supplier resource centers.
Plan it wellOn mobile, preserve context and provide a clear route back to the list.
Also calledsplit-view browser / list detail pattern / resource browser
Cultivation equipment specification viewer
The visitor controls how much space each side of a workspace receives. A range control provides the same adjustment without requiring a precise drag gesture.
Useful forSpecification viewers and catalog management interfaces.
Plan it wellSet sensible minimum widths and keep both panes usable at their extremes.
Also calledresizable panels / split pane / adjustable workspace
Cannabis supplier resource directory
The same records switch between comfortable and compact spacing. It lets visitors choose a roomier reading view or a denser scanning view without changing the data.
Useful forLarge product directories and repeat-order screens.
Plan it wellMaintain accessible controls and legible type even in the compact setting.
Also calledcompact view / comfortable view / table density
Cultivation supplier warehouse
View position: 0%
A wider-than-screen scene moves inside a fixed viewing window. The visitor chooses which part to inspect using a slider rather than automatic camera movement.
Useful forFacility overviews, booth displays and wide product photographs.
Plan it wellProvide a useful initial crop and alternative text describing the complete scene.
Also calledpanorama viewer / pan-to-explore / wide image viewer
Nutrient bottle image cropping
An image is cropped into different shapes while its focal point remains adjustable. It demonstrates how a product or subject can stay visible across desktop and mobile layouts.
Useful forProduct photography, category banners and responsive hero images.
Plan it wellA focal point improves cropping but cannot replace separate art direction for very different layouts.
Also calledobject position / image focal point / responsive image crop
LED grow-light housing layers
The layers of a product spread apart to reveal how the pieces relate. A slider controls the separation so visitors can inspect the structure at their own pace.
Useful forEquipment housings, packaging components and hardware accessories.
Plan it wellUse accurate component assets and labels for a production product explanation.
Also calledexploded diagram / product breakdown / assembly view
Grow-light comparison shortlist
Select up to two products.
Selected products collect in a small comparison tray before their specifications are shown together. The tray preserves the shortlist as visitors browse.
Useful forGrow lights, equipment and other specification-heavy products.
Plan it wellLimit the selection to a readable number and compare equivalent units and attributes.
Also calledcompare bar / product shortlist / comparison drawer
Growing media replenishment
Sample interface. No subscription starts.
A recurring-order interface shows the selected delivery interval and example price together. It helps buyers understand the difference between a one-time purchase and repeat deliveries.
Useful forRegularly replenished soil, nutrients and packaging supplies.
Plan it wellShow actual renewal terms, cancellation rules and prices before a real subscription starts.
Also calledsubscribe and save / reorder frequency / subscription selector
Cultivation supply order threshold
$100.00 to the sample $100 threshold
A progress bar shows how far a sample basket is from a stated threshold. Each item updates the total and the remaining amount, making the rule visible before checkout.
Useful forStores with genuine shipping or order-value incentives.
Plan it wellUse the real threshold and exclusions; never imply an offer applies when it does not.
Also calledfree shipping bar / cart goal / threshold meter
Cannabis packaging bag sizes
A grid lets buyers choose several product variants in one pass. Each row keeps the option, quantity and subtotal together while the order total updates.
Useful forPackaging dimensions, container sizes and multi-size supply orders.
Plan it wellConnect every cell to its actual SKU, available stock and pack rules.
Also calledbulk variant selector / order grid / multi-variant cart
Cannabis supplier project requirements
0 tags selected.
Short entries become editable chips that can be removed individually. It turns a list of requirements into a compact, visible set without forcing a fixed dropdown.
Useful forProject briefs, product attributes and resource tagging.
Plan it wellKeep a clear label, support keyboard entry and prevent accidental duplicate values.
Also calledchip input / multi-value field / token input
Nutrient product summary
0 / 120 characters
A counter shows how much room remains as the visitor types. The field stops at its declared maximum so users can shape a concise entry without losing text unexpectedly.
Useful forShort product descriptions and structured intake fields.
Plan it wellExplain the limit and keep the full draft available if a production field needs longer content.
Also calledcharacter counter / input length indicator / text limit
Cannabis packaging label editor
Applied version 1.
Each applied change becomes a reversible step. Undo and redo let visitors explore changes without losing the prior state or restarting the task.
Useful forProduct builders, brief editors and creative configuration tools.
Plan it wellMake the scope clear and avoid promising that irreversible server actions can be undone.
Also calledhistory stack / reversible editing / undo redo
LED grow-light wattage comparison
| LED A | 400 W |
|---|---|
| LED B | 200 W |
| LED C | 600 W |
Column controls reorder the same records by a chosen value. A visible direction and semantic table structure help visitors compare a compact dataset.
Useful forEquipment specifications and structured product directories.
Plan it wellSort numeric values numerically and announce the active column and direction.
Also calledsortable table / column sorting / data grid
Cannabis supply purchasing mix
Total: 100
A circular chart redraws as the category values change. The total and legend remain visible so the graphic complements the actual numbers.
Useful forBudget planners and category breakdowns.
Plan it wellKeep labels and values available outside the chart and handle an all-zero dataset clearly.
Also calleddonut graph / doughnut chart / live pie chart
Grow-light electricity estimate
96.00 kWh / $14.40 per 30 days
The estimate multiplies equipment power, daily runtime and electricity cost over a stated period. The inputs make the assumptions visible and the result responds immediately.
Useful forLighting and equipment product pages.
Plan it wellThis is a simple energy estimate; real bills may include demand charges, taxes and other fees.
Also calledelectricity cost calculator / operating cost / power cost estimator
Seeds & genetics / type on a circular path
Lettering follows a circular path around a central mark. A manual rotation control shows how curved type can add movement to an otherwise static composition.
Useful forBrand badges and short decorative statements.
Plan it wellKeep the message short and repeat essential information in ordinary readable text.
Also calledcircular typography / text on path / rotating type
Wholesale supply inquiry button
Press the button to feel the response.
A button compresses and returns with a short spring-like easing curve. The animation gives the action a physical response without moving the surrounding layout.
Useful forPrimary actions and tactile interface details.
Plan it wellKeep the movement brief and respect reduced-motion preferences.
Also calledspring animation / elastic button / bounce easing
Nutrients & soil collection transition
A colored curtain crosses the viewing area while the scene changes. The transition gives separate pieces of content a shared visual rhythm.
Useful forPortfolio scenes and short campaign stories.
Plan it wellDo not delay navigation unnecessarily; show the destination immediately when motion is reduced.
Also calledpage transition / color wipe / curtain transition
Mobile cannabis supplier menu
Three lines transform into a close symbol as a small menu opens. The icon mirrors the expanded state so the control remains understandable.
Useful forMobile headers and compact navigation controls.
Plan it wellExpose the expanded state to assistive technology and use an accessible text label.
Also calledhamburger animation / menu icon morph / animated close icon
Wholesale nutrient case quantities
9 cases / 108 units / 8 extra units
A requested unit quantity rounds up to complete cases and shows both the supplied quantity and the remainder. It clarifies minimum pack rules before an order is built.
Useful forNutrient bottles, soil bags and packaged wholesale supplies.
Plan it wellUse the product's real pack size and show any extra units before the buyer commits.
Also calledcase quantity calculator / MOQ calculator / pack rounding
Growing media pallet quantities
0 full pallets + 12 cases / 1 pallet needed
A compact loading diagram fills as cases are added, with full pallets and the remaining load shown separately. It makes a fixed sample capacity easier to understand.
Useful forWholesale supplies and case-based replenishment orders.
Plan it wellA production tool needs verified dimensions, weight limits and handling rules; this demo uses a fixed sample capacity.
Also calledpallet fill / freight quantity visualizer / shipping capacity
Custom cannabis packaging schedule
A small timeline separates production and transit into visible stages. The projected arrival updates when the starting date or working-day estimates change.
Useful forMade-to-order packaging and supplier quote requests.
Plan it wellSample dates exclude weekends only; real promises require stock, holidays and carrier data.
Also calleddelivery timeline / manufacturing lead time / dispatch estimator
Repeat cultivation supply order
Load a sample order to begin.
A previous sample order fills an editable quantity list, allowing a buyer to adjust the next order without searching the catalog again.
Useful forWholesale accounts that buy the same supplies regularly.
Plan it wellA real version must authenticate the buyer and recheck current prices, stock and account permissions.
Also calledquick reorder / saved order template / repeat purchase
Seeds & genetics / interactive brand concept
Cedar A → Northstar. Fictional lineage.
Connected nodes reveal the story behind a genetics collection.
Useful forSeed breeder catalogs and cultivar stories.
Plan it wellUse verified breeder records; the names here are fictional.
Also calledgenetics tree / ancestry diagram / interactive network
Seeds & genetics / interactive brand concept
A dimensional carousel brings one seed packet forward while the rest recede.
Useful forSeed releases and curated collections.
Plan it wellKeep normal links and clear keyboard controls alongside motion.
Also called3D carousel / coverflow / rotating product gallery
Seeds & genetics / interactive brand concept
4 fictional cultivars
A compact, searchable archive lets visitors explore a seed collection by type.
Useful forSeed brand catalogs and breeder directories.
Plan it wellUse reliable catalog fields; never invent strain traits.
Also calledfaceted search / cultivar database / breeder archive
Seeds & genetics / interactive brand concept
A moving pool of color brings a monochrome seed-brand composition to life.
Useful forGenetics launches and brand campaign headers.
Plan it wellKeep the headline visible and provide a touch control.
Also calledcolor spotlight / masked gradient / chromatic reveal
Vape hardware / interactive brand concept
A reveal mask exposes an illustrated device interior without leaving the product story.
Useful forEmpty vape hardware and technical product pages.
Plan it wellProduction drawings must match the actual hardware; this is illustrative.
Also calledX-ray slider / cutaway view / internal product reveal
Vape hardware / interactive brand concept
An interactive material preview shows color and surface treatments on empty hardware.
Useful forVape hardware manufacturers and custom equipment.
Plan it wellConfirm manufacturable options and sample approval before accepting orders.
Also calledCMF configurator / private label preview / material selector
Vape hardware / interactive brand concept
One product silhouette smoothly changes shape as the visitor explores a device family.
Useful forPod, pen and compact device collections.
Plan it wellUse true product dimensions in a production comparison.
Also calledshape morph / product family transition / form factor switch
Vape hardware / interactive brand concept
A luminous circular indicator tracks a value with a crisp technical readout.
Useful forBattery hardware features and equipment dashboards.
Plan it wellThe demo is a visual illustration, not a connected device reading.
Also calledradial gauge / progress ring / device telemetry
Grow lighting / interactive brand concept
Illustrative channels. No measured fixture data.
A live spectrum graphic connects colored light bands to simple interface controls.
Useful forLED lighting technology and product education.
Plan it wellIllustrative relative values only; use measured data for real fixtures.
Also calledspectrum visualizer / channel mixer / wavelength chart
Grow lighting / interactive brand concept
Geometry demonstration, not a light plan.
Moving light cones make a mechanical product feature easier to understand.
Useful forLighting fixtures and adjustable optics.
Plan it wellThis is not a photometric calculation or a light plan.
Also calledbeam steering / light cone animation / optical diagram
Grow lighting / interactive brand concept
A luminous grid responds to the pointer with a soft, moving pool of light.
Useful forLighting brand heroes and technology launches.
Plan it wellKeep the effect decorative; it does not represent measured coverage.
Also calledreactive grid / light sweep / interactive lighting background
Grow lighting / interactive brand concept
A pinned fixture illustration shifts from outline to illuminated product as the story scrolls.
Useful forLighting launches and technical equipment pages.
Plan it wellUse a readable static state when reduced motion is enabled.
Also calledscroll product reveal / pinned product story / product scrollytelling
Packaging / interactive brand concept
Illustrative carton, not a production dieline.
A flat dieline becomes a dimensional carton through an interactive folding sequence.
Useful forSeed cartons, hardware boxes and packaging suppliers.
Plan it wellA real print workflow still needs approved dielines and proofs.
Also called3D carton fold / packaging animation / dieline preview
Nutrients & soil / interactive brand concept
Surface texture / illustrated material study.
Stacked material layers lift apart to explain a product construction visually.
Useful forGrowing media, filtration and engineered materials.
Plan it wellThe layers illustrate interface design, not a soil formulation.
Also calledmaterial cross section / layered product story / material stack
Equipment & systems / interactive brand concept
Intake / system overview
A moving line traces how connected equipment stages relate to one another.
Useful forIrrigation, filtration and automation manufacturers.
Plan it wellUse the actual system schematic and stop motion when requested.
Also calledflow animation / process diagram / connected system map
Equipment & systems / interactive brand concept
A tactile dial ties a numeric value to a changing color field and dashboard state.
Useful forClimate equipment and sensor interface demonstrations.
Plan it wellSample interface values only; no cultivation recommendations or live sensor data.
Also calledambient UI / control dial / responsive dashboard
Try another word, category, or save a few favorites first.
A VISUAL GLOSSARY FOR BETTER WEBSITE CONVERSATIONS
Design details work best when they help someone understand, explore or act. Start with the job your website needs to do.
Mega menus, search suggestions, filters and clear navigation help people move through larger websites. Choose them around your content and the way your customers browse.
Parallax scrolling, image reveals, interactive galleries and sticky storytelling can connect a message to something people experience. A few purposeful moments are often enough.
Calculators, comparisons, guided forms and useful product interactions can turn an uncertain decision into a more informed one. The feature should earn its place.
WORKING EXAMPLES, PLAIN-ENGLISH ANSWERS
Try describing what it does in the search box: a menu that fills the screen, an image that follows your cursor, or a picture that moves while you scroll. Each demo includes the common name, related terms and an explanation you can share with your designer.
These are working interfaces built into the page. Open menus, move sliders, change values, hover over cards and scroll inside the marked frames. Shopping, booking and inquiry examples use sample information and do not create orders or appointments.
Many of these patterns work well in Shopify themes, from mega menus and quick views to product comparison and custom calculators. The right implementation depends on your theme, apps, content and business rules. Customer accounts and larger tools may require additional development.
The lab includes tap, swipe and button controls for touch screens. When a feature depends on hover, we plan a touch alternative. On a real project, the mobile version is designed and tested as part of the feature.
They can. A strong website uses motion selectively, loads assets thoughtfully and keeps important content accessible. The goal is to make the next step clearer. We choose effects around your audience and test performance instead of adding motion everywhere.
Use “Add to my brief” on any demo, then open “My brief.” You can copy or download the selection with the exact names and links. Add your goals and project details before contacting CMC.
Some names are widely used, such as mega menu, parallax scrolling and lightbox. Others have several common labels. The related terms help connect those names to a working example, even when different designers use different terminology.
FROM INSPIRATION TO A REAL PROJECT
Save a few features, then add the context that matters: your business, the people you want to reach and what you want the site to do. Your choices are saved in this browser.
