PAGE Interactive – projektujemy i wdrażamy responsywne strony www w technologii no-code z użyciem Framera.
Warszawa, Polska
Joined June 2012
- Tweets732
- Following143
- Followers99
- Likes245
PAGE interactive retweeted
The best UI components ready to use. Save this 👇
kobra.systems/ — Beautiful React components for adding polished interactions to your UI.
beautifului.dev/ — AI-native UI components that make complex interfaces feel effortless.
kinetics.colorion.co/ — 153 spring-powered animations to bring your interfaces to life.
beui.dev/ — Animated React components ready to drop into your next project.
transitions.dev/ — Smooth UI transitions built for modern interfaces.
astryx.atmeta.com/ — A polished collection of UI patterns for modern products.
evilcharts.com/ — Animated charts that make your data look way more interesting.
reverseui.com/ — Premium animated UI components for modern web apps.
What Did I Miss?
PAGE interactive retweeted
Use this tool to create quick brand presentations
designminis.com/tools/light-…
PAGE interactive retweeted
Useful resources, tools, websites, apps 👇
- Contentcore.xyz — 3D, motion, mockups
- Supaste.com — clipboard history app
- Vehla.app — Mac command center
- Backgrounds.supply — backgrounds
- Dock.Cool — dock with widgets for macOS
- Screen.Movie — screen recorder, editor, motion design (soon)
- Screensdesign.com — app design library
- Macapp.Supply — browse Mac apps
- Lummi.AI — AI images
PAGE interactive retweeted
Fable 5 + Goose Ads is insane – literally a full ad-creative team right in Claude Code.
1. Install the skill:
npx gooseworks install --all
npx gooseworks login
2. Ask Claude Fable to make ads for your brand.
/goose-ads create ads for my brand .
Fable 5 pulls the ads already winning in your space and rebuilds them on-brand – your product, your palette, your copy – a whole batch, ready to test.
It can ship a month of creative testing in a single prompt.
This is also possible with Opus and Sonnet, but Fable's brand research is next level.
Link below.
PAGE interactive retweeted
Access ALL prompts for stunning animated websites in one click: motionsites.ai
# PROMPT: Recreate this landing page exactly
Build a production-quality marketing landing page for a thoughtful newsletter platform called "Mindloop" as a Vite + React + TypeScript app using Tailwind CSS, shadcn/ui, framer-motion, and lucide-react. The aesthetic is calm, editorial, cinematic — black background, white foreground, serif italic accents, ambient looping background videos, and a signature "liquid glass" effect on interactive surfaces. No purple/indigo hues.
## Stack & dependencies
- Vite + React 18 + TypeScript
- Tailwind CSS with shadcn/ui design tokens (HSL CSS variables)
- `framer-motion` for animation
- `lucide-react` for icons
- `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic) for fonts
- Do NOT install other UI libraries
## Global theme (src/index.css)
Import fontsource CSS at top, then Tailwind layers. Pure black/white palette via HSL vars:
```css
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/instrument-serif/400.css";
@import "@fontsource/instrument-serif/400-italic.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 5%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 12%;
--secondary-foreground: 0 0% 85%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 65%;
--accent: 170 15% 45%;
--accent-foreground: 0 0% 100%;
--border: 0 0% 20%;
--input: 0 0% 18%;
--ring: 0 0% 40%;
--hero-subtitle: 210 17% 95%;
--radius: 0.5rem;
}
}
@layer base {
* { @apply border-border; }
html, body {
margin: 0; padding: 0;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: Inter, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { @apply bg-background text-foreground; }
}
.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; }
/* Liquid glass effect — frosted surface with inset highlight + animated gradient border */
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
Tailwind config extends `fontFamily.sans = Inter`, `fontFamily.serif = "Instrument Serif"`, and maps all colors to the HSL vars. Dark mode is class-based (but the whole site is black by default).
## Shared animation helper (src/lib/animations.ts)
```ts
export const fadeUp = (delay: number = 0) => ({
initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, margin: "-100px" },
transition: { duration: 0.6, delay, ease: "easeOut" as const },
});
```
## App structure (src/App.tsx)
```tsx
```
## Logo component
The logo is a PNG placed at `public/image.png`. Component renders `
` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA).
---
## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll)
- `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`.
- Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states:
- Not scrolled: `bg-transparent px-6 py-3`
- Scrolled (>20px): `liquid-glass px-5 py-2.5`
- Left: `
` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA).
---
## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll)
- `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`.
- Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states:
- Not scrolled: `bg-transparent px-6 py-3`
- Scrolled (>20px): `liquid-glass px-5 py-2.5`
- Left: `
PAGE interactive retweeted
Our 23rd template just landed in the Framer Marketplace 🔥
Operator - Perfect for AI Automation Agencies.
For next 48 hours, its FREE ($99 after that)
1⃣ Like this post
2⃣ RT
3⃣ Comment Operator
And we'll DM you the remix link!
Preview below 👇
(Make sure to follow in case your DMs are closed)
PAGE interactive retweeted
deck.gallery just got a big update!
- Waay faster
- A new deck every single day
- Explore by slide type (intro, pricing, team…)
- No membership, no paywall
Free, forever.
Another win in Season 2 of the @framer challenge 🚀
Now officially at $2,000 earned on the road to $5,000. Momentum is growing, progress is real, and I’m just getting started.
framer.com/challenge #FramerChallenge
$1,000 milestone reached in Season 2 of the @framer challenge 🎉
A strong first step toward my $5,000 revenue goal. Excited to keep building in public and sharing the journey week by week.
framer.com/challenge #FramerChallenge
I’m applying for Season 2 of the @framer challenge with a goal of $5000 in revenue. Building in public over the next few weeks. framer.com/challenge #FramerChallenge.
Cyfrowa transformacja biznesu - dlaczego profesjonalna strona WWW jest kluczem do sukcesu
Abstrakcyjna scena z unoszącymi się przezroczystymi ekranami w jaskrawych kolorach i świetlnymi liniami symbolizującymi przepływ danych.
i najważniejszym - punktem styku z potencjalnymi klientami.
Jak więc stworzyć stronę, która nie tylko zaistnieje w internecie, ale będzie skutecznym narzędziem biznesowym? W PAGE Interactive opracowaliśmy proces, który łączy strategię biznesową z doskonałym projektowaniem
zorientowanym na użytkownika
Szczegóły i praktyczne wskazówki znajdziesz w artykule
pageinteractive.pl/blog/cyfr…
🎯 “Wyróżnij się lub zgiń” dziś bardziej aktualne niż kiedykolwiek
W 2025 roku internet to ocean stron walczących o uwagę użytkownika. Jak więc zaprojektować design, który naprawdę się wyróżnia i jednocześnie realizuje cele biznesowe?
🔍 Sprawdź dobre praktyki, które łączą estetykę z konwersją.
pageinteractive.pl/blog/jak-…
Prototypowanie kluczem do realizacji perfekcyjnych stron WWW
Praca nad nowoczesną stroną internetową w 2025 roku to balansowanie między sztuką a nauką, kreatywnością a danymi, emocjami a funkcjonalnością.
Prototypowanie stało się fundamentalnym elementem tego procesu, pozwalającym dopracować każdy szczegół zanim trafi on do kodu.
📷 Sprawdź, jak ten etap wpływa na jakość, efektywność i finalny sukces projektu.
pageinteractive.pl/blog/prot…
