Field Note while Learning Template Design | Day 1
(Fill Width + Fit the height + Space In between)*Relative 100% (Frame Wrap) = elastic content
after that try manipulating the frames spacing by using min & max width / height.
this is the formula works on every stubborn responsive problem.
& Always mind that Fill is your best friend
Custom Code is a path lead to Awwwwards :)
After along time with this platform here what i learned
Fill is your best friend (always trust it, it can help u in worse situation)
Fixed + absolute is your Bruce lee (its flexible to let you experiment first)
Relative is hidden ninja technique to escape brutal responsive bugs
Fit content feels satisfying when u do it, isn't it :)
Viewport ain't that helpful for me yet must be my naive skills T_T
first sale. 🎉
weeks of late nights, zero installs, posting into the void.
someone across the world bought SpectralParticles.
it's just $5. but it's the most important $5 I've ever made.
thank you to everyone who watched the Design Logs, left a comment, or just believed the work was going somewhere.
we're just getting started. 🐊
📚 Learning Log #1.3
Instead of maintaining multiple breakpoint pages in Framer, I started experimenting with a viewport-based variant override.
So far it's made updating responsive layouts much easier.
If there's interest, I'll clean up the code and share the override.
Still a work in progress, but it's already making my workflow much cleaner.
📚 Learning Log #1.2
Today I learned why an SSR fallback matters when building responsive code components in Framer.
The server has no idea what your screen size is, so relying on window.innerWidth alone can lead to missing content or hydration issues.
My solution was simple: • Render a default desktop variant during SSR. • Use isMounted to switch to the correct viewport after hydration.
Small change, but it made the component much more reliable and SEO-friendly. specially if using inline code or text manipulation code component.
🧪 Design Log #7
Another old experiment.
Thought I'd share it here too.
Hyper Nova Kinetic (Beta)
🎧 Sound on.
🧪 Design Log #6.9
Throwback.
Found this old SpectralParticles experiment while organizing some files.
Still one of my favorite projects.
🎧 Best experienced with sound on. ⭐
🌧 🐸 💻 🎧 Work Log #1
Recorded yesterday's 3-hour work session while building the hero section of my first Framer template.
Just rain, thunder, keyboard sounds, and the design process.
🔊 Sound on for the full experience. ⭐
Question for Framer creators 👀
While making my first template, I noticed 1280×720 still appears in some screen usage data.
Do you still optimize for it, or do you mainly focus on 1366×768 and above?
I'm asking because 1280×720 feels like an awkward breakpoint. It's technically a desktop resolution, but its height is closer to a tablet, which makes responsive layouts a little tricky.
📚 Learning Log #1.1
Currently working on my first Framer template.
While figuring out the responsive layout, I made this screen resolution heat map for myself... then thought, why not share it here too?
Maybe it'll save someone else a few hours. 😊
📓 Throwback
Found one of my old Design Logs from X and wanted to share it here as well.
I enjoy documenting the process just as much as the finished result. It's always interesting to look back and see how much has changed.
Original post:
🧪 Design Log #6.8
Added a new preset to Aurora today.
Pinewood 🌲
Didn't plan for it to end up like this. I was just experimenting with colors and flow until it finally clicked.
One more preset added to the library. On to the next experiment. ✨
🧪 Learning Log #1
Time to explore p5.js.
Aurora started with curiosity, and I don't want that to stop after launch.
I'm experimenting with new creative coding techniques to see what ideas might shape future projects.
Any favorite p5.js sketches or resources I should check out? 👀
🚀 Aurora is now live.
After weeks of experimenting, optimizing, and building in public, Aurora is finally available.
What started as a simple liquid shader slowly grew into a searchable shader library with curated presets, tags, and interactive customization.
This is just the beginning.
Thanks to everyone who followed the Design Logs, gave feedback, reported bugs, and shared ideas along the way. It genuinely helped shape the product.
🌌 Aurora Shader is now available.
🚀 Launch reward: Use AURORA20 to save 20% and get Aurora for $3.20 (regularly $4). First 20 orders only.
✨ Aurora Shader is now available.
This has been one of my biggest Framer components so far. It started as a simple liquid shader and slowly grew into a customizable image-driven background system.
Thanks to everyone who shared feedback during development. Hope you enjoy creating with it. ✨
🧪 Design Log #6.7
Aurora Library Progress 📚
From a handful of presets... to a collection worth browsing.
The core vision is finally coming together.
Just polishing the final details and waiting for the right time to launch. 🚀✨
Thoughts? 👀
🐊 Design Log #6.6
Today's rabbit hole:
Making light feel like part of the texture instead of sitting on top of it.
While polishing Aurora today I noticed something odd 👀
property controls dropdown are showing a white background behind native inputs and invisible texts. It also appears in older components that haven't been touched in months.
Curious if this is a Framer 3.0 bug or if I've accidentally summoned it myself 😅
Anyone else seeing this?
It's been 2 weeks and I haven't opened X once.
Framer somehow managed to make a social feed just as addictive 😄
Now it's up to us to keep it interesting.
So far it feels like Reddit + design Twitter without the comparison spam.
Curious where it goes from here. 👀
