Element variants (hover, focus, etc.) for code components

Ideas and Feedback
1

Problem

Built-in Plasmic elements support element variants, which let you modify styles directly in the styles panel based on states like :hover, :focus, :pressed, etc.
This is a great workflow because you can make changes in-place without leaving the current context.

Code components can register variants, but these only become available when you create a custom Plasmic component with the code component as its root. This adds
friction:

  1. You have to create a wrapper component for every code component you want to style with states
  2. The styling happens in a separate component context, not in-place
  3. It clutters the project with wrapper components

Proposed solution

Allow code components to register element variants that work the same way as built-in elements. Something like:

PLASMIC.registerComponent(MotionBox, {
name: “MotionBox”,
props: { /* … */ },
elementVariants: [“initial”, “animate”, “whileInView”, “whileHover”, “whileTap”]
});

These variants would then appear in the styles panel when the code component is selected, just like they do for native elements.

Use case

I’m building a Framer Motion wrapper component (motion.div) that lets designers create animations visually. With element variants, designers could define the
initial state styles (e.g., opacity: 0, translateY: 20px) and the whileInView state styles (e.g., opacity: 1, translateY: 0) directly in the styles panel - the
same intuitive workflow they already use for hover states on buttons.

Without this feature, every animated element needs a dedicated wrapper component just to access these states.