Keputusan Produk · Harga · Tier Section · Kurasi

Harga, tier Section, & kurasi isi halaman Section

Dipisah dari homepage-restructure-plan.html. Isinya tiga hal: (1) keputusan tampilan harga, (2) verdict tier Section, (3) kurasi — section mana dari 34 porto yang layak dijual, dinilai dari kekuatan interaksi & animasi.

SCOPE · Keputusan produk + kurasi konten TANGGAL · 3 Agt 2026 SUMBER · 34 file full-prompts + 12 hero-prompts

1 · Harga — tampilkan 2 kartu terputuskan

Terputuskan

Yang ditampilkan

Yearly Access

$49/thn

Akses tanpa batas
Aset gambar & video Hero
Prompt baru tiap bulan

Lifetime Most Popular

$199 $89

Semua isi Yearly
Sekali bayar, selamanya
Harga launch terkunci

Free tetap ada sebagai mekanik (10 prompt — 5 Halaman Penuh + 5 Hero), tapi tidak ditampilkan sebagai kartu. Modelnya jadi trial, bukan paket. Ini pilihan yang wajar — kartu Free yang berdiri sejajar sering menarik orang berhenti di situ dan tidak pernah melihat kolom berbayar.

Satu hal yang perlu dijaga

Free tanpa kartu artinya copy-nya harus lebih spesifik, bukan lebih samar

Kalau Free tidak punya kartu, satu-satunya tempat user tahu batasnya adalah copy. Kondisi sekarang di homepage — "Free to start. Upgrade whenever you are ready." — tidak menyebut angka apa pun. Digabung dengan tidak adanya kartu Free, user tidak punya cara mengetahui bahwa jatahnya 10 sampai dia menabrak batasnya.

Rekomendasi copy: "Mulai gratis dengan 10 prompt. Buka semuanya mulai $49." Satu kalimat, batasnya jelas, dan tetap tanpa kartu Free. Sebutkan juga di FAQ dan di bawah tombol CTA.

Kenapa penting: batas yang diketahui di depan terasa seperti penawaran. Batas yang baru ketahuan saat ditabrak terasa seperti jebakan — walaupun angkanya persis sama.

Wajib diperbaiki

Tiga tempat yang masih bertentangan

Homepage FAQ #6 — masih bilang "Paid tier details are still being finalized". Sekarang jelas salah.
billing.astro — komentar kode masih "Two paid tiers only, no free plan", padahal Free sudah ada sebagai mekanik.
billing.astro — menjual "Unlimited Section & Full LP prompts". Baru benar setelah halaman Section terisi.

Butuh backend

Kuota Free mengubah logika gating

library.astro sekarang gate semua copy di balik login — biner. Dengan Free 10 item, logikanya jadi hitungan kuota per akun (5 Halaman Penuh + 5 Hero). Perlu dukungan D1 dan kontrak API-nya disepakati dengan Pak Arya lebih awal, jangan menunggu frontend selesai.

Catatan pasar

Harga hanya dalam USD

$89 ≈ Rp 1,4 juta. Target di plan adalah vibe coder pemula Indonesia yang price-sensitive. Tidak ada harga IDR dan tidak ada sinyal metode bayar lokal (QRIS/transfer/e-wallet). Bukan blocker launch, tapi kemungkinan besar ini hambatan konversi terbesar begitu trafik Indonesia masuk. Minimal: tampilkan perkiraan IDR di sebelah harga USD.

2 · Tier Section — verdict ya, dan dieksekusi sekarang

Perlu ada — tiga alasan

Yang pertama paling menentukan

Ini satu-satunya alasan paket Yearly punya pekerjaan. Yearly $49 vs Lifetime $89 cuma beda 1,8×. FAQ di billing.astro sendiri sudah mengakuinya: "kalau pakai lebih dari dua tahun, Lifetime pays for itself." Siapa pun yang berhitung sebentar akan pilih Lifetime. Yearly baru masuk akal kalau ada alasan kembali tiap bulan — Halaman Penuh itu kebutuhan sekali per proyek, sementara Section kebutuhan berulang. Tanpa Section, kamu menjual langganan tanpa alasan berlangganan.
Ini satu-satunya klaim ke "alternative to 21st.dev". 21st.dev menjual komponen/section; motionsites menjual galeri hero/LP. Tanpa tier Section, esprompt hanya alternatif motionsites — separuh strategi positioning di plan bagian 1 hilang, termasuk keyword-nya.
SEO long-tail. "prompt pricing section", "bento grid prompt", "sticky scroll section prompt" — banyak query spesifik dengan persaingan rendah, versus sedikit query luas untuk Halaman Penuh. Plan menetapkan SEO prioritas #1; Section melipatgandakan halaman yang bisa diindeks.

⚠ Koreksi asumsi — ini yang menentukan scope hari ini

Di audit sebelumnya saya tulis bahwa Section bisa "dipotong murah" dari Halaman Penuh yang sudah ada. Setelah saya periksa isi 34 file, itu tidak akurat.

Hanya 4 file yang punya breakdown per-section — velo · recall · beyond-horizon · relay. 30 sisanya monolitik: isinya "copy App.tsx ini persis", package.json, vite.config, dan implementation rules. Tidak ada batas per-bagian yang bisa dipotong.

Implikasi buat hari ini: jangan targetkan 40 item. Targetkan 12 section dari 5 porto terbaik — itu yang realistis diselesaikan tanpa derivasi ulang dari situs sumber. Detailnya di bagian 3.

3 · Kurasi — porto mana yang layak jadi Section dinilai dari interaksi & animasi

Saya skor 34 file berdasarkan dua hal: sinyal library animasi (GSAP/ScrollTrigger, motion/react, Lenis, WebGL) dan sinyal interaksi native (@keyframes, hover state, sticky/scroll-snap/IntersectionObserver, drag/parallax/marquee).

SKOR INTERAKSI GABUNGAN — 12 teratas dari 34

elan89

recall50

aura47

serenity40

arlo29

luma28

beyond-horizon23

kilt22

velo19

pylon14

trainfold12

vris10

Temuan yang paling penting sebelum kamu memilih

Paling impresif ≠ paling layak dijual. Ini tensi nyata dan menentukan mana yang kamu ambil.

velo punya section paling spektakuler di seluruh katalog — dua section scroll-pinned pakai GSAP ScrollTrigger. Tapi prompt-nya sendiri mendokumentasikan cara section itu rusak: tanpa anticipatePin: 1 layout melompat, tanpa z-index eksplisit section-nya muncul di belakang yang lain. Untuk pemula yang menempel prompt ke Cursor, itu tingkat kegagalan yang tinggi — dan section yang gagal generate jauh lebih merusak daripada section yang biasa saja.

Sebaliknya arlo dan luma skornya lebih rendah tapi interaksinya CSS + IntersectionObserver murni — hampir mustahil gagal, dan tetap terlihat hidup.

Komposisi yang saya sarankan: ±70% reproduksi-tinggi, ±30% signature. Signature yang menarik orang masuk katalog; reproduksi-tinggi yang bikin mereka tidak kapok dan balik lagi.

Empat kriteria kurasi — pakai ini buat menilai sendiri

Interaksinya terlihat dalam 3 detik. Kalau harus scroll 200vh baru kelihatan, thumbnail katalognya mati dan orang tidak akan klik.
Self-contained. Tidak bergantung state global atau halaman lain. Cart drawer butuh data produk — riskan sebagai section berdiri sendiri.
Bisa direproduksi dalam satu prompt. Tanpa plugin premium, tanpa 3 file konfigurasi. Ini yang menggugurkan sebagian besar section GSAP.
Nilainya berdiri sendiri. Orang mencarinya sebagai "section pricing", bukan sebagai "bagian dari situs Recall".

TIER A · SIGNATURE

Wow tinggi — pakai sebagai magnet katalog

Section	Sumber	Interaksi	Risiko reproduksi
Pricing flip card	recall	Auto-flip tiap 3400ms, rotate-y-180, spring damping:14 stiffness:100, berhenti saat disentuh user	Rendah
Sticky stacking cards	beyond-horizon	sticky top-0 h-[100dvh] dengan z-index bertingkat — kartu menumpuk saat scroll	Rendah — CSS murni
Custom cursor + product grid	aura	Cursor 12×12 → 100×100 dengan spring, muncul teks "VIEW MORE", AnimatePresence	Sedang
Drag-to-scroll carousel	elan	Gesture mouse kustom untuk drag horizontal di track koleksi	Sedang
Hero scroll morph	beyond-horizon	GSAP pin h-[250vh], scrub 1.5 — hero berubah jadi konten berikutnya	Tinggi
Scroll-pinned comparison	velo	ScrollTrigger pin end:"+=220vh", scrub	Tinggi — butuh anticipatePin
Scroll counter	velo	Angka menghitung naik mengikuti progress scroll	Tinggi
Preloader berprogress	aura	Timer 60ms × 40 langkah, gambar di-push bertahap sambil progress 0→100	Sedang

TIER B · UTILITAS TINGGI

Dibutuhkan tiap situs, hampir mustahil gagal generate

Section	Sumber	Interaksi	Risiko reproduksi
Sticky hide-on-scroll header	luma	Sticky setelah 20px, sembunyi saat scroll turun cepat, muncul lagi saat scroll naik	Rendah
Infinite marquee	arlo · beyond-horizon	@keyframes 24s linear / translateX(-33%)	Sangat rendah
Scroll reveal grid	arlo · elan	IntersectionObserver — opacity:0 translateY(24px) → masuk viewport	Sangat rendah
Feature cards spring	recall	Kartu masuk dengan type:'spring', stagger antar kartu	Rendah
Footer clip-path wipe	aura	Reveal via clipPath inset + blur(16px)→blur(0)	Rendah
Magnetic button + text reveal	recall	Komponen reusable — MagneticButton.tsx, TextReveal.tsx	Rendah
Category tile hover zoom	luma · arlo	scale(1.05) dengan overflow:hidden, mask brightness	Sangat rendah
Announcement bar berputar	luma	Pesan berganti otomatis di bar paling atas	Sangat rendah
FAQ accordion	luma · elan	Expand/collapse dengan transisi tinggi	Sangat rendah
Testimonial	recall	Satu-satunya testimonial di file berskor tinggi	Rendah

TIER C · LEWATI DULU

Skor interaksi nol

warebotics · thecity · stillwave · figureworld · edgehaul · curalink · curalink-medic-ai · candor · altr · aethera · apex · saha-medical · storefront-v1 · lunea · vox

Statis — tidak ada hover, keyframe, sticky, maupun library animasi. Sebagai Halaman Penuh mereka tetap bernilai (layout & copy-nya utuh), tapi sebagai Section mereka tidak menambah apa pun yang tidak bisa ditulis sendiri oleh AI dalam satu kalimat.

4 · Scope untuk hari ini 12 section, 5 porto

Daftar yang saya sarankan dieksekusi

Dipilih supaya menutup 8 tipe dasar yang tiap landing page butuh, plus 4 signature sebagai magnet. Semuanya dari 5 file yang detail interaksinya sudah terdokumentasi — tidak perlu derivasi ulang dari situs sumber.

#	Section	Sumber	Tipe	Kelas
1	Pricing flip card	recall	Pricing	Signature
2	Sticky stacking cards	beyond-horizon	Feature / showcase	Signature
3	Custom cursor + product grid	aura	Gallery / grid	Signature
4	Drag-to-scroll carousel	elan	Carousel	Signature
5	Sticky hide-on-scroll header	luma	Nav / header	Utilitas
6	Footer clip-path wipe	aura	Footer	Utilitas
7	Infinite marquee / logo strip	arlo	Logo strip	Utilitas
8	Feature cards spring	recall	Feature grid	Utilitas
9	FAQ accordion	luma	FAQ	Utilitas
10	Testimonial	recall	Testimonial	Utilitas
11	CTA + magnetic button	recall	CTA band	Utilitas
12	Scroll reveal grid	arlo	Content grid	Utilitas

Komposisi: 4 signature + 8 utilitas = 33% / 67%, persis rasio yang disarankan. Delapan tipe dasar tertutup semua. Katalog naik dari 47 → 59.

Catatan produksi

Section butuh preview sendiri — ini akan kena hari ini juga

Thumbnail di public/assets/showcase/ semuanya screenshot halaman penuh. Kalau item Section memakai thumbnail yang sama, katalog akan terlihat seperti 59 screenshot halaman penuh yang berulang — dan tier Section jadi tidak terasa beda dari Halaman Penuh.

Solusi: tiap Section butuh preview ter-crop di bagian itu saja, dengan rasio berbeda dari Halaman Penuh (mis. 16:10 untuk Section vs 3:4 untuk Halaman Penuh). Perbedaan rasio saja sudah cukup membuat tier terbaca sekilas di grid. Untuk 4 signature, idealnya pakai video pendek — interaksinya justru yang dijual, dan PNG tidak bisa menunjukkannya.

Setelah hari ini

Gelombang berikutnya

velo (3 section scroll-pinned) — tunda sampai ada waktu menguji prompt-nya benar-benar berhasil di Cursor/v0. Wow-nya tertinggi tapi risiko gagalnya juga tertinggi.
luma cart drawer + quick view modal — nilainya tinggi buat pembuat toko, tapi butuh state produk. Repackage sebagai "section" yang berdiri sendiri dulu.
serenity (skor 40, hover 37) — kuat untuk niche health/edukasi. Belum masuk karena tipenya tumpang tindih dengan yang sudah dipilih.
kilt · pylon · trainfold — skor menengah, layak jadi varian kedua untuk tipe yang sudah ada.

Target berikutnya: 5 varian per tipe dasar (8 tipe × 5 = 40). Dengan 12 hari ini, sisanya 28 — realistis dicicil sambil jalan, bukan dikejar sekaligus.

5 · Satu peluang yang sayang dilewatkan catatan penutup

Delapan tipe dasar itu persis section yang homepage esprompt sendiri tidak punya

Audit homepage menemukan kekurangan: pricing, testimonial/bukti, FAQ yang rapi, feature grid, CTA band, logo strip. Daftar kurasi di atas berisi tepat section-section itu.

Artinya cara termurah membangun tier Section adalah membangun homepage kamu sendiri lebih dulu, lalu menjual hasilnya. Sekali kerja, dua hasil — dan sekaligus bukti paling meyakinkan bahwa prompt-nya benar-benar bekerja: "homepage yang kamu lihat ini dibangun dari section yang kami jual." Itu klaim yang tidak bisa ditiru motionsites maupun 21st.dev, dan tidak butuh satu testimoni pun.

Praktisnya: saat mengerjakan Gelombang 2–3 di homepage-restructure-plan.html (section Harga, Kenapa esprompt, 3 Tier), simpan tiap section yang kamu bangun sebagai calon item Section. Nol pekerjaan tambahan.

Keputusan Harga, Tier Section & Kurasi · 3 Agt 2026. Skor interaksi dihitung dari 34 file di src/data/full-prompts/ — sinyal library animasi (GSAP/ScrollTrigger, motion/react, Lenis, WebGL) + sinyal interaksi native (@keyframes, hover, sticky/IntersectionObserver, drag/parallax/marquee). Pendamping: homepage-restructure-plan.html. Draft kerja.