/ Back to blog

Framer × Contra Hackathon : mon défi en temps réel (deadline minuit)

Je participe au Framer × Contra Hackathon avec 10 000 $ à gagner. Je suis en tendance sur Contra, je te partage les règles officielles, les étapes clés et le composant que je suis en train de peaufiner.

Category:

Framer

Author:

Umut Sevinc

Time:

2 mins

Date:

Sep 1, 2025

Framer Hackathon Contra - Memselon
Framer Hackathon Contra - Memselon
Framer Hackathon Contra - Memselon

🏆 Le concept : 10 000 $ en jeu


Le Framer × Contra Hackathon met les builders au défi :
→ Créer un composant unique et créatif dans Framer, le publier, et décrocher une place parmi les 6 gagnants qui se partageront 10 000 $ de prix.

Deadline : ce soir, minuit.
Infos officielles : Guidelines du hackathon


Les règles clés à respecter


  • Créer un composant inédit avec Framer Workshop

  • Fournir un lien de preview + un lien de remix pour le jury

  • Être original, intuitif et impactant

  • Soumettre ton composant avant minuit via Contra


Mon composant : AR Product Viewer


J’ai voulu créer un composant qui réinvente l’expérience produit en ligne.

Imagine : tu veux montrer un produit en 3D et en réalité augmentée directement depuis ton site Framer, sans une seule ligne de code. C’est exactement ce que fait AR Product Viewer :

  • 🌀 Popup 3D instantanée → rotation, zoom, pan fluides

  • 📱 Mode AR mobile → fonctionne direct sur Android et iOS

  • 📂 Upload ou lien vers ton modèle GLB/GLTF/USDZ

  • 📏 SizeModel (%) → garde une échelle cohérente entre la preview et l’AR

  • 🎨 UI personnalisable → bouton, style, typographies… adaptable à ton branding

Le tout léger, rapide, intuitif : un drop-in component pensé pour les marques, les e-commerces et les portfolios.


Twitter - x - Memselon


Conseils pour les derniers participants


  1. Trouver l’idée
    J’ai analysé les manques dans la Marketplace : pas de solution AR simple → opportunité trouvée.

  2. Prototype rapide
    J’ai codé le composant en React dans Framer Workshop, responsive dès le départ.

  3. Soigner l’expérience
    Micro-interactions, gestion dark/light mode, configuration simplifiée.

  4. Buzz sur Contra
    Mon post est déjà en tendanceVoir mon profil Contra


🕛 Dernière ligne droite


Mon composant AR Product Viewer est déjà en ligne et je ne peux plus rien modifier.
Maintenant, tout repose sur le jury et la décision finale. ⏳

Je suis encore en tendance sur Contra, donc chaque vue, chaque interaction compte pour maximiser la visibilité avant la deadline.

Je croise les doigts 🤞 pour faire partie des 6 gagnants et décrocher ma part des 10 000 $ 🥂
Quoi qu’il arrive, je partagerai un retour complet sur mon process, les enseignements et les prochaines étapes !


🔗 Découvre mon composant AR Product Viewer

FAQ

Est-ce que je peux utiliser AR Product Viewer sur n’importe quel site Framer ?
Oui ! Tu peux intégrer AR Product Viewer dans n’importe quel projet Framer. Il fonctionne immédiatement, sans aucune configuration complexe ni besoin de coder.
Quels formats de fichiers 3D sont compatibles ?
Le composant accepte les formats GLB, GLTF et USDZ. Tu peux uploader ton modèle directement ou lier un fichier hébergé : tout est pensé pour être simple et rapide.
Comment fonctionne le mode AR mobile ?
Sur mobile, un simple clic active la réalité augmentée et permet à l’utilisateur de placer le produit dans son environnement. Pas besoin d’applications tierces : tout fonctionne nativement sur Android et iOS.
Est-ce que je peux utiliser AR Product Viewer sur n’importe quel site Framer ?
Oui ! Tu peux intégrer AR Product Viewer dans n’importe quel projet Framer. Il fonctionne immédiatement, sans aucune configuration complexe ni besoin de coder.
Quels formats de fichiers 3D sont compatibles ?
Le composant accepte les formats GLB, GLTF et USDZ. Tu peux uploader ton modèle directement ou lier un fichier hébergé : tout est pensé pour être simple et rapide.
Comment fonctionne le mode AR mobile ?
Sur mobile, un simple clic active la réalité augmentée et permet à l’utilisateur de placer le produit dans son environnement. Pas besoin d’applications tierces : tout fonctionne nativement sur Android et iOS.
Est-ce que je peux utiliser AR Product Viewer sur n’importe quel site Framer ?
Oui ! Tu peux intégrer AR Product Viewer dans n’importe quel projet Framer. Il fonctionne immédiatement, sans aucune configuration complexe ni besoin de coder.
Quels formats de fichiers 3D sont compatibles ?
Le composant accepte les formats GLB, GLTF et USDZ. Tu peux uploader ton modèle directement ou lier un fichier hébergé : tout est pensé pour être simple et rapide.
Comment fonctionne le mode AR mobile ?
Sur mobile, un simple clic active la réalité augmentée et permet à l’utilisateur de placer le produit dans son environnement. Pas besoin d’applications tierces : tout fonctionne nativement sur Android et iOS.
Umut Sevinc - The Landing

par Umut Sevinc

par Umut Sevinc

Read Next
Popular
Keep Learning
Read Next
Keep Learning
Read Next
Popular
Keep Learning

Similar articles

Similar articles

Similar articles

Get notified

Get notified

Stay updated with the newest components, plugins, templates and upcoming releases.

No spam. Unsubscribe anytime.

Get notified

Stay updated with the newest components, plugins, templates and upcoming releases.

No spam. Unsubscribe anytime.

Ange - Memselon
Ange - Memselon
Ange - Memselon
Need Help?
Q&A
Find your answer
Need Help?
Find your answer

FAQ.

Clarifying process, timelines, and tools — so every collaboration with Memselon starts with trust, clarity, and precision.

01

What is Memselon?

02

What services do you offer?

03

How do projects usually start?

04

Do you offer ongoing or subscription-based design?

05

Why work with Memselon instead of an agency or freelancer?

06

What tools and technologies do you use?

01

What is Memselon?

02

What services do you offer?

03

How do projects usually start?

04

Do you offer ongoing or subscription-based design?

05

Why work with Memselon instead of an agency or freelancer?

06

What tools and technologies do you use?

What is Memselon?

What services do you offer?

How do projects usually start?

Do you offer ongoing or subscription-based design?

Why work with Memselon instead of an agency or freelancer?

What tools and technologies do you use?