Cinema Screen Video affiche vos vidéos avec une légère courbure inspirée des écrans de cinéma. Choisissez un effet convexe ou concave et ajustez indépendamment la courbure horizontale et verticale pour obtenir un rendu discret ou plus spectaculaire.

La déformation repose sur une véritable forme CSS (clip-path), et non sur un filtre ou un effet visuel simulé. Le résultat reste donc parfaitement net, quelle que soit la taille du composant.

Features

Courbure

• Forme convexe ou concave au choix

• Intensité horizontale et verticale réglables indépendamment

• Courbez les côtés, le haut et le bas, ou combinez les deux pour créer l’effet souhaité

• Utilise un clip-path CSS natif pour garantir des contours nets à toutes les tailles

• Rayon de bordure optionnel, appliqué en complément de la courbure

Lecture vidéo

• Importez une vidéo ou utilisez une URL externe

• Contrôles de lecture intégrés : lecture/pause, muet et barre de progression

• La barre de progression suit naturellement la forme incurvée de l’écran

• Prise en charge de l’autoplay, de la lecture en boucle et du mode muet

• Image de couverture (poster) optionnelle affichée avant le démarrage de la vidéo

Style

• Ombre native qui épouse la silhouette courbée du composant, plutôt qu’un simple rectangle

• Effet de vignettage personnalisable avec réglage de l’intensité, de la couleur et de la transparence

• Possibilité de masquer tous les contrôles pour utiliser la vidéo comme élément d’arrière-plan

Note d'usage

Cinema Screen Video applique sa courbure directement à un véritable élément <video> via clip-path, sans déformation de pixels ni WebGL. Le composant reste ainsi léger, performant et compatible avec tous les formats vidéo pris en charge par le navigateur.

Pour optimiser les temps de chargement, il est recommandé d’utiliser des vidéos correctement compressées.

Pour un rendu réaliste et discret, une intensité verticale comprise entre 30 et 50 fonctionne généralement très bien. Des valeurs plus élevées sur les axes horizontal et vertical produiront un effet plus marqué.

Installation

1. Glissez Cinema Screen Video sur votre canvas Framer

2. Importez une vidéo ou collez une URL

3. Choisissez une forme convexe ou concave

4. Ajustez les intensités horizontale et verticale selon le rendu souhaité

5. Publiez