Element AI lets you generate fully native, editable components directly inside Vev — no embeds, no code, no leaving the editor. Describe what you need, drop in a reference image if you have one, and get a real Vev element you can style, animate, save to your library, and reuse across all your projects.

How It Works

Add Element AI from the top toolbar in any project. A prompt field appears where you can describe the element you want — "an interactive timeline with five milestones", "a pricing calculator with a slider" — and attach a reference image alongside your prompt for extra visual context. In under a minute, a custom element lands on your canvas, ready to use.

Iterate Without Starting Over

Element AI remembers the conversation. Refine the result with follow-up prompts — "make the hover state softer", "add a fourth step", "add a subtle fade-in as each milestone enters view." — and each version is saved to history so you can jump back whenever you want.

The Property Panel Is Yours

Every Element AI created comes with a real property panel. Colors, text, spacing, behavior — the things you'd expect to control on any Vev element are exposed as proper controls, not buried in code. Designers build it; editors run with it.

Designers Build It, the Team Runs With It

Element AI fits the way Vev teams already work. A designer generates and polishes a component once. Save it to a library, and every collaborator in your workspace can drop it into their projects — no prompting, no AI knowledge required. One person's prompt becomes your whole team's new building block.

Get Started

Open any project, click Element AI in the top toolbar, and describe what you want to build. For a full walkthrough — including prompt tips and how to use image context — read the Element AI help article.

The Scrollytelling element lets you sync background transitions to the user’s scroll, creating layered visual stories where images, videos, or colors change as your audience reads through your content.

It’s built for product walkthroughs, editorial long-reads, step-by-step guides, and data stories — any layout where the visual context needs to shift while the reader stays in the same section.

How It Works

The element has two layers: a background layer for the visuals that transition on scroll, and a foreground layer for content like text, buttons, and interactive graphics. You build each layer separately, and the element handles the scroll-synced background transitions.

• Background: Enter Edit Mode, add blocks, and insert your visuals.
• Foreground: Place content directly on the main canvas, on top of the component.

Transition Effects

Choose from seven transition types to control how backgrounds animate into view:

• Horizontal scroll — slides content horizontally
• Fade — fades blocks in or out
• Reveal — slides in from a direction
• Stack — stacks blocks on top of each other
• Mask — reveals through a shape like a circle or square
• 3D — flips content with a 3D effect
• None — no transition between blocks

Each type has its own settings, like direction, blur, and zoom. Set the speed with a single dropdown: Smooth, Slow, Medium, Fast, or Snappy.

Mix Effects Across Blocks

Set a default transition and speed for the whole element, then override individual blocks to mix effects throughout your story. Open with a fade, transition through a stack sequence, and close with a mask reveal — all within the same element.

Get Started

See our tutorial video or read the help article to learn how to use the Scrollytelling element.

You can now add Motion elements to Vev projects. Motion is a set of 12 animated animated elements you can drag onto the canvas, resize like any other element, and customize in the Properties panel (e.g. colors, speed, intensity, and interaction).

Motion is designed to add visual depth and movement without slowing down your page, making them a good fit for hero sections, landing pages, and other high-visibility sections.

Available Motions

• Aurora: flowing, northern-lights style waves
• Color Bends: abstract color patterns with distortion and mouse influence
• Faulty Terminal: CRT-style glitch effect with scanlines and curvature
• Floating Lines: animated lines that wave across the screen
• Galaxy: starfield effect with glow, twinkle, and optional mouse repulsion
• Gradient Blinds: animated gradient stripes with a spotlight effect
• Orb: glowing orb with pulsing and hover interaction
• Particles: 3D particle system with customizable density and motion
• Prism: rotating prismatic crystal with multiple animation modes
• Prismatic Burst: radiating rays of prismatic light from the center
• Threads: subtle flowing threads that wave across the background
• Light Pillar: Ethereal light pillar that glows and rotates.

To Get Started

1. Open the Add menu in the Vev editor
2. Click “Motion” under "Elements" category
3. Drag your chosen Motion onto the canvas
4. Resize and position as needed
5. Customize the effect using the Properties panel

To learn more, see our guide: 👉 Motion

We’ve combined all starting points into a single menu to get you into the editor faster. With new Scope settings for Libraries, you can now define exactly how your team interacts with shared assets—whether as full-page templates or modular building blocks.

New Project Creation Flow

All starting options are now consolidated into one dropdown. This bypasses the setup screens and drops you directly into the editor.

• Blank: Start with a clean canvas (Desktop or Mobile).
• Library Page: Jumpstart a project using a pre-approved page from your team library.
• Figma Design: Import designs directly from Figma to start your project.
• Page Draft (AI): Generate an initial page structure with prompts using text and image assets.

Library Scope

When publishing to a Library, you can now set a Scope for each page. This determines how team members find and use those assets.

• Page: Share as a full-page template. Individual sections are hidden from the Add menu to keep the page structure intact. Use this for specific, fixed-purpose pages.
• Sections: The individual sections are listed in the Add menu as building blocks, but the full page is hidden. Use this for sections intended to be mixed and matched across different designs.
• Exclude: Keeps the page and sections hidden. Use this to prevent drafts or in-progress work from being pushed to the team library.

Quick Actions for Empty Sections

Empty sections now display Quick Action buttons on the canvas. Instead of navigating the editor panels, use these shortcuts to start your layout instantly.

Customizable Sidebar

You can now Pin or Unpin "Templates" or "Shared with me" in the top dashboard navigation. This allows you to declutter your view and keep your most-used items accessible.

Libraries is officially out of Beta. In the past, managing brand assets required copying elements from old projects or rebuilding page structures from scratch—a slow process that often led to "brand drift" and inconsistent designs.

With this launch, Libraries becomes the primary way to manage shared assets in Vev, replacing the older Templates feature. While Templates remains available for now, we recommend switching to Libraries to centralize your brand assets.

Shared Layouts & Team-Wide Access

Now, you can create a single "source of truth" by pushing any Vev project to a Library. This allows you to browse and drop approved Pages and Sections directly into any new project.

• When to use it: This is perfect for launching new campaigns or case studies quickly. Instead of designing the layout, you pull a pre-approved one from your Library and swap in your new text and images.
• The impact: You save hours of repetitive design work and can focus on creating better content, knowing your projects are automatically on-brand.

Get Started

To set up your first library, or convert your legacy templates into one, see our guide: How to Create and Manage Libraries.

This release note introduces updates focused on team workflows, ensuring design consistency, and building more dynamic, engaging layouts.

Libraries (Beta)

Create a centralized library containing approved headers, footers, call-to-action blocks, and standardized components. Team members then drag these assets into their individual projects.

Libraries ensure that:

• Every project uses the current, up-to-date designs.
• Projects start faster because design blocks are instantly available.

🔗 Get started with Libraries

Scroll Parallax

Designers can now apply the new parallax interaction to elements so they scroll at different speeds than the rest of the page. This introduces visual depth and sophisticated motion to pages and layouts, moving beyond static design.

🔗 Learn how Scroll Parallax works

Slider Library

Quickly add ready-made slider or carousel sections to any page from the new Slider library. Customize the look and content without building the structure from scratch, speeding up the production process.

Pexels Integration

Access the Pexels royalty-free assets directly within the image or video tab when dropping media onto the canvas. Source high-quality visuals faster without leaving the editor.

“Jump to element” Linking

Create an internal link that, when clicked, automatically scrolls the visitor to a specific section, such as the Pricing table or FAQ section on the target page. This improves navigation and directs users to key information instantly.

Edit Interactions in Content Mode

Content editors can now update interactions, such as changing a button's destination URL (e.g., from a general sales page to a seasonal promotional page), directly within Content Mode. This reduces dependency on the design team for minor updates.

This update introduces a new Starter Library and several enhancements to asset management, designed to streamline your project creation and organization.

Asset Management Improvements

We’ve added new features to help you work more efficiently with your project images, videos, and shapes.

Quickly Preview Assets

Instead of dragging or selecting every file to see how it looks, you can now hover over an image, video, or shape in the panel to see a live preview. This helps you quickly identify the right asset.

Efficiently Clean Up Your Assets

To help you keep your project tidy, assets that are currently being used are automatically tagged “In use”. This makes it easy to spot and delete old, unused assets. You can also use the new “Clear all unused” button to quickly clean up your project files.

Batch Update Images

When you have a new version of an image, you can now add a new file with the same name as an existing one and choose to update the old version. This saves you time by letting you update multiple images throughout your project in a single action.

New: Starter Library

The Starter Library is a new collection of ready-to-use sections. You can drag and drop these sections onto your canvas to quickly lay out a new project.

We'll be adding more libraries soon, so keep an eye out for new designs and resources.

Page Panel Update

The Page Panel now visually mirrors your project’s URL paths, making it easier to see and navigate your site structure. This helps you quickly understand how your pages are organized.

🔗 Learn how to organize your pages

Gradient Variables

You can now save and apply gradients as color variables. This helps you maintain a consistent look and feel across your project by ensuring every instance of a specific gradient is identical and can be updated from a single location.

🔗 Read more about using variables

We've enhanced Main Components with States and Variants, to help you design flexible, scalable, and consistent user interfaces. They allow you to manage interactive behaviours and design variations within a single, reusable component, streamlining your workflow and improving design consistency.

States

States define how a component responds to user interactions such as hovering, pressing, or focusing. Specify the component's appearance in each state, and the system will manage the rest.

Use case:

• Create interactive components, like a button or card with hover styles, providing clear visual feedback.
• Ensure accessibility with focus styles for keyboard navigation.

Variants

Variants are alternate versions of a component used for different contexts. Instead of creating a separate component for each design, you can house them all as Variants within a single Main Component.

Use case:

• Build a component system with ready-made layout options, ensuring brand consistency.
• Provide dark and light theme variants, allowing for easy mode switching.

Combining States and Variants

By combining States and Variants, you can create reusable components that are consistently dynamic and adaptable, eliminating the need for copying and pasting.

Use case:

• Create a reusable button component housing primary and secondary variants, both with built-in hover, pressed, and focused states.

Get Started

• Adding States: Select your Main Component, enter "Edit mode", then navigate to the style panel. Select the desired state (i.e., Hover, Pressed) from the States dropdown.
• Creating Variants: To create a new variant, enter "Edit mode" for your Main Component and head over to the left panel and click the "Add variant" button. Now you have a new variant ready to be styled.
• Using Variants: To use an existing variant of your Main Component, simply select the component and use the variant dropdown at the top of the style panel.

Learn more

→ How States and Variants benefit your workflow

→ Learn how to use States and Variants

Hi there,

The Add Menu has been refreshed to make browsing and finding components faster and more intuitive, while keeping the way you add them to the canvas unchanged.

This update also lays the groundwork for the upcoming Libraries feature, making it easier to organize and reuse your design assets.

Simplified List View

Component categories are now displayed in a simple vertical list, offering a clearer overview and navigation with less friction.

Components Panel

Hover over any category to instantly view its components in the new side panel. Explore what’s available without any clicks.

Drag Onto Canvas

In the new category panel, you can continue dragging components directly to your canvas. No changes to how it works, just a smoother way to browse.

Coming Soon: Libraries

This update is part of a broader effort to support more advanced workflows and scalable design systems. Libraries will allow you to save and reuse pages, sections, and components across projects, helping you stay consistent and work more efficiently.

Hi there,

Vev now supports Rive!

If you love adding motion to your designs, you’re going to love this. Rive lets you create motion graphics, and now you can seamlessly bring them into Vev.

How to get started:
✔️ Grab the Rive component from Vev’s library
✔️ Upload your .riv files
✔️ Play around and bring your designs to life.

Need a hand? We’ve got a quick tutorial to walk you through it. Can’t wait to see what you create! ✨