My submission for #configmakeathon Hi I am Gauravi , a ux ui designer and a computer science engineer. Here are the prompts and process I used. prompts I used in @Figma make prompt 1 : Select the moon icon in the top right of the 'Night - Light On' frame. On click, navigate to 'Day - Light On'. Use Smart Animate with a 'Custom Cubic Bezier' (0.4, 0, 0.2, 1) over 700ms. Ensure the glass dome glows and background gradients morph smoothly prompt2:Don't swap screens for the day/night toggle. Keep a single persistent layout and animate only the background color, glow opacity, and text colors when the mode changes. Use CSS transitions on individual properties

Prompt for glass dome animation Create a single GlassDomeScene component.

Inside it:

Render both nightLayer and dayLayer absolutely positioned.

Keep both mounted at all times.

Animate opacity between them.

Never use conditional JSX rendering. Use state only to toggle class names or opacity values. PRompt for tree shadow rotation : Update the tree shadow layers so their rotation animates when theme changes.

Each tree shadow must:

Remain mounted at all times.

Preserve element identity across states.

Animate the transform property instead of replacing the element.

Implement: transform: rotate(Xdeg)

Night state: Shadows angled to match moon direction.

Day state: Shadows angled to match sun direction.

Add CSS transition: transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);

Do not re-render or replace the shadow elements. Only animate their transform values. Ensure the tree shadow elements are independent layers with their own transform origin set to center.

Do not bake shadow rotation into static SVG paths. Use CSS transform rotation so it can interpolate smoothly. Thankyou @Figma @Gui Seiz for this oppurtunity