fredm00n/framerlabs

Overview

This skill helps experienced Framer creators build robust Code Components and Code Overrides for Framer projects. It codifies required annotations, React patterns, and Framer-specific constraints so components behave correctly in the editor, preview, and published sites. Use it to avoid common pitfalls like hydration mismatches, font issues, and broken scroll or shader behaviors.

How this skill works

It provides consistent patterns for Code Components (with addPropertyControls) and Code Overrides (HOCs without property controls), plus required framer annotations and naming conventions. It enforces hydration-safe rendering, wraps state updates with startTransition, and documents canvas vs preview detection, font handling, scroll observers, WebGL tips, portals, and other edge cases. Practical examples and code snippets show how to implement overlays, loaders, animations, and variant/scroll handling safely.

When to use it

• Creating custom React Code Components for the Framer canvas with property controls
• Writing Code Overrides (HOCs) to modify existing canvas elements
• Implementing Framer Motion animations and complex easing behavior
• Handling fonts, hydration, portal overlays, or WebGL/shader integrations
• Debugging editor-specific issues like hydration errors, stacking contexts, and scroll detection

Best practices

• Always include minimum Framer annotations (disableUnlink and intrinsic sizes) and set sensible defaults
• Wrap all state updates in startTransition() to avoid rendering issues in Framer
• Never read font properties individually—spread the entire font object into style
• Use the isClient two-phase pattern to avoid SSR/browser API access during render
• Detect canvas vs preview with RenderTarget and disable heavy effects in editor
• Use React Portal for overlays to escape parent stacking contexts and ensure consistent display

Example use cases

• Code Component with addPropertyControls for editable typography and motion-driven UI
• Code Override as withFeatureName HOC to add analytics, variant switching, or behavior toggles to existing layers
• Responsive particle system using resize debounce, orientation handling, and touchAction adjustments
• Scroll-triggered animations using viewport IntersectionObserver instead of overflow:scroll containers
• Loading overlay that locks scroll in published site and fades out after CMS hydration