Skip to content

component

Cinematic Wave

By Agie Faishal

Details

Summary

Cinematic interactive light effect

Description

Full Preview: https://hiiv3.framer.website/ Bring Awwwards-winning aesthetics to your Framer projects with the Light Ribbon component. Designed for high-end digital experiences, this premium WebGL module generates a stunning, mathematically perfect light wave that bends dynamically to user cursor movements. Forget heavy, pixelated video backgrounds. This component uses an ultra-optimized 2D SDF (Signed Distance Field) formula to ensure buttery-smooth 60fps performance across all devices, while maintaining native alpha transparency for flawless dark-mode blending. Key Features: Fluid Interactivity: The light ribbon organically pulls towards the mouse, creating a subtle, premium gravity effect that delights users. Zero Code Required: Fully integrated with Framer's property panel. Tweak background colors, wave color, light intensity, speed, amplitude, and frequency instantly. Cinematic Polish: Comes with built-in animated analog film grain and subtle edge vignettes to draw focus to your typography. Hyper-Optimized: Lightweight WebGL implementation ensures peak performance on both high-end desktops and mobile devices. True Dark Mode Blending: Flawless alpha math guarantees zero color banding on deep dark backgrounds (like #1C1C1C). Perfect For: Creative & Design Agency Sites High-End Portfolios & Resumes Luxury Brand Landing Pages SaaS, Web3 & Tech Startups How to Use: Simply paste the component into your Framer canvas, set it to absolute positioning with a 0 z-index, tweak the sliders to match your brand colors, and publish. Instant premium feel in seconds.

Introduction

Cinematic interactive light effect

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600174848/148/228/309/79/15
  • All · #7449